Ok, now I really feel like a jerk, but for some reason I can't get jcrop in the picture that is in the colorbox modal window. Here is the code:
<head runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script src="Scripts/jquery.colorbox.js" type="text/javascript"></script>
<script src="jquery.Jcrop.js" type="text/javascript"></script>
<link href="jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<link href="colorbox.css" rel="stylesheet" type="text/css" />
<script>
$(document).ready(function () {
$(".addpicture").colorbox({ width: "50%", inline: true, href: ".page1" });
$(".nextpage").colorbox({ width: "50%", inline: true, href: ".page2" });
$('#jcropme').jcrop() });
});
</script>
</head>
<body>
<form runat="server">
<p><a href="#" class="addpicture">Add/Edit Picture</a></p>
<div style="display:none;">
<div id="page1">
testing text 1??
<img src="flowers.jpg" id="jcropme" />
<input type="button" value="Next Page" class="nextpage" />
</div>
<div id="page2">
testing text 2??
<input type="button" value="nextpage2" class="nextpage2" />
</div>
</div>
</form>
</body>
If I delete the last line of javascript ($ ('# jcropme'). Jcrop ()});), then the modal window works, but when I add this line so that jcrop works, the modal windows stop working. I know this is the correct jcrop code because I took it directly from the demo and none of Google seem to have ever used two plugins together. Is anyone
source
share