Jcrop » API Documentation

Jcrop Home • Download • Manual • Examples

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,options);
});

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 ]

Notice: If you are using scaled images these calls will set based on the true image size.

The selection can also be cleared:

release	n/a	Release current selection

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)

Controlling Interactivity

Jcrop can be disabled and re-enabled using these API calls:

disable	n/a	Disables Jcrop interactivity
enable	n/a	Enables Jcrop interactivity

Jcrop can also be completely removed from the image:

destroy	n/a	Remove Jcrop entirely

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 ]);
    });

});

• This page was last modified 19:42, 3 April 2009.
• This page has been accessed 28,599 times.