tapmodo/Jcrop — Issue #17: Reapply jCrop to the same object break it
Author: ChrisCinelli
Created: 2011-12-22 04:05:16+00:00
State: open

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:

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