Trying to use Jcrop api

Question

I am using Jcrop and I wan't to dynamically change the aspect ratio for the selection based on user input, so I guess the way to go is to use Jcrop api.

Thing is that if I use it as a jquery function it works ok:

$('#cropbox_full').Jcrop({
  onChange: update_full_dimensions,
  onSelect: update_full_dimensions
});

But if I use it calling Jcrop function my image is no longer displayed:

var api = $.Jcrop('#cropbox_full', options);

Is it a Jcrop bug?

BTW I am using chrome and jquery 1.4.2

Answer 1

There seems to be some bug while using chrome because in firefox this works:

$.Jcrop($('#cropbox_full'),options);

After jCrop has been setted it can be accessed like this and options can be resetted, this worked with chrome:

$('#cropbox_full').Jcrop(options);
var jcrop = $('#cropbox_full').data('Jcrop');
jcrop.setOptions(newOptions);

Answer 2

That could be a bug in JCrop but you can write your code in a fashion that works on Google Chrome, FF, IE and Safari. To do so, instead of:

        $.Jcrop($('#cropbox_full'),options);

use something like this:

        $(document).ready(function () {
            $('#cropbox_full').Jcrop({
                onSelect: storeCoords,
                setSelect: [0, 0, 114, 137],
                aspectRatio: 114 / 137,
                minSize: [114, 137]
            });
        });

Answer 3

If you're using $.Jcrop() directly, it's expecting a jquery object or an element.

A usage example would look like this:

$.Jcrop($('#cropbox_full'),options);

Answer 4

I had a similar problem today. I solved it by initializing the Jcrop api in

$(window).load(function() { ... });

instead of

$(document).ready(function() { ... });

which is common practice in jQuery.