Question

I’m using the latest version of jquery.jcrop. When invoking jcrop() on an image, the cropping works but the callback does not get called. This makes it impossible to set jcrop_api for later use. Specifically I’d like to be able to change the image and need the destroy() method.

function setJCrop() {
    //Set image for cropping
    jQuery('#preview').Jcrop( {
        minSize : [126, 126],
        setSelect : [ 0, 0, 126, 126 ],
        //onChange: updateMeasurements,
        onSelect: updateMeasurements,
        aspectRatio: 1
    }, function() {
        jcrop_api = this;  //callback not being called
    } );
}

This began happening when switched to this invocation of the jQuery ready function:

jQuery(document).ready(function($) {

Answer 1

Justin’s code is pretty much what the documentation says. But when you get into reolaoding images usgin the API in IE6,7,8 it does it once then falls over. Why? Because IE has issues.

The more compatible way of starting the API should be like this.

define your api in the outermost part of your script.

var jcrop_api;

Then when you need to start the API, for example after uplaoding on the same page.. you do this (And this line is what keeps IE and other weird browsers happy) I uses two tags because sometimes my cropper is used on a master page and I left it for example only. Also I do not set any options but you can if you want to.

jcrop_api = $.Jcrop($('#SourceImage, #body_SourceImage'), {});

Then for each image you you can start the cropper

       jcrop_api.setOptions({
            boxWidth: 500,
            onSelect: updateCoords,
            minSize: [thisImage.Min.Width, thisImage.Min.Height],
            aspectRatio: thisImage.AspectRatio  //1.3 for example
        });
        jcrop_api.setImage(uploadLocation + fileName);

and importantly when you are done with cropping you HAVE to destroy the API , and start it again. Again- just to keep all browsers happy.

 jcrop_api.destroy();