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

});
©2008-2010 Deep Liquid Group | Contact