CODEWITHSUNDEEP
jqueryjquery-plugins
benmanbs
benmanbs

Reputation: 87

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"></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 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?

Upvotes: 3

Views: 1371

Answers (1)

Mottie
Mottie

Reputation: 86413

Try putting the jcrop call in after the colorbox is loaded, like this:

$(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();
 });

});

Upvotes: 2

Related Questions