Reapply jCrop to the same object break it

[ChrisCinelli]

I have a hidden modal dialog that is supposed to show jCrop in particular conditions (BTW, I am using modal dialogs in Twitter Bootstrap - http://twitter.github.com/bootstrap/ but I am sure that a normal fixed div with display:none is behaving the same)

1) Jcrop does not work if I apply at an hidden element and show it later. The workaround I used is to use $("mypic").jCrop({...}) after the dialog show up (bind on 'shown' in the bootstrap dialog). 2) In the body of the dialog I have soemthing like:

        <div style="width:70px; height:70px; overflow:hidden; margin-bottom:5px;">
            <img src="http://deepliquid.com/Jcrop/demos/demo_files/pool.jpg" class="preview" />
        </div> 

        <img src="http://deepliquid.com/Jcrop/demos/demo_files/pool.jpg" class="target" /> 

Now if after I use JCrop the first time, I substitute the picture with:

            var $trg = $('.target', $id);
            var  $preview = $('.preview', $id);

            $trg.attr('src', pic_url);
            $preview.attr('src', pic_url);

and I call again $("mypic").jCrop({...}) , the result is horrible: The picture is deformed and using the width and height of the previous picture and there are now 2 jCrop section squares, one of which is showing the old picture in the square. See : http://d.pr/niIk

[ChrisCinelli]

I tried to call the Jcrop only if(!$trg.data('Jcrop')) but on the second call picture is not updated. I guess that the work around is to destroy the s each time but I would prefer a cleaner solution.

Best, Chris

[tapmodo]

There was a recent fix to allow for attaching to hidden elements. Can you make sure you are testing against the current master branch? There is also a new demo included that shows it working with jQuery UI under several different creation circumstances. I assume Bootstrap works similarly to one of these. You may need to have the <img> in the DOM, but it should now work with hidden elements. Please advise your results. Thank you!