Using Jcrop with Colorbox

Ok, now I really feel like a moron, but for some reason I can't get jcrop on a picture that is in a colorbox modal window. Here's the code:

    <head runat="server">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"&gt;&lt;/script&gt;
    <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 remove that last javascript line ($('#jcropme').jcrop() });) then the modal window works, but when I add that line so that jcrop will work, the modal windows stop working. I know this is the right jcrop code, because I took it straight off the demo included, and no one on google seems to have ever used the two plugins together. Anyone?

$(document).ready(function () { $(".addpicture").colorbox({ width: "50%", inline: true, href: ".page1" }); $(".nextpage").colorbox({ width: "50%", inline: true, href: ".page2" }); $(document).bind('cbox_complete', function(){ $('#jcropme').Jcrop(); }); });

That did the trick, thanks. If you have a free moment, would you mind explaining to me why that worked?

benmanbs 2010-07-19 21:42:40

Jcrop makes a bunch of extra divs that it needs to overlay the image. Since the image is initially hidden, it can't get the correct position and dimensions. So with the code above, we wait until colorbox has completely revealed it's contents, then applied Jcrop to the image.

fudgey 2010-07-19 22:02:57

Let's say I wanted to put Jcrop on the second colorbox. How do I bind Jcrop to the second one and not the first one?

benmanbs 2010-07-21 15:25:26

Change the id into a class... `$('.jcropme').Jcrop();`

fudgey 2010-07-21 16:25:03

Then the picture doesn't show up at all, but Jcrop does...

benmanbs 2010-07-21 16:33:29

Hmm, ok try this then... `$('#colorbox .jcropme').Jcrop();` this will then only target the image inside of the colorbox.

fudgey 2010-07-21 20:43:15

ansaurus

tags:

views:

answers:

Using Jcrop with Colorbox

related questions