Jcrop API

Jcrop » API Documentation

jcrop.png

The API allows developers to create custom Jcrop interaction and behaviors. The API is a bit preliminary at this point, but some documentation is provided.

Features currently supported by the API

  • Alter callback handlers after instantiation
  • Set selection manually
  • Animate current selection to new selection

API Invocation Method

The easiest way to grab a handle to the Jcrop API is using pattern:

$(window).load(function(){
    var api = $.Jcrop(obj);
});

Proper values for obj can be a DOM object, a jQuery selector string, or a jQuery object. If the resultant jQuery object contains multiple elements, the first one is used. Options may be specified as the second parameter, see example below.

Important note: you must call the API Invocation Method from within $(window).load() or unexpected behavior may occur.

API Functionality

Setting the Selection

setSelect array Set selection, format: [ x,y,x2,y2 ]
animateTo array Animate selection to new selection, format: [ x,y,x2,y2 ]

Important: If you are using scaled images please note that these methods currently only set selections based on the effective interface dimensions, not the true image size. This will be corrected in a future release.

Getting the Selection

The Jcrop API provides an alternative to using callbacks by providing methods to query the current selection values.

tellSelect n/a Query current selection values (true size)
tellScaled n/a Query current selection values (interface)

Example Code

$(window).load(function(){

    var api = $.Jcrop('#cropbox',{ bgColor: 'red' });

    // Immediately set selection (can also be set by options)
    api.setSelect([ 100,100,200,200 ]);

    // Set an event handler to animate selection
    $('#button1').click(function() {
        api.animateTo([ 120,120,80,80 ]);
    });

});