• Simple Usage
• Callback Functions
• Advanced Usage
  • Animated Selection Area
  • Using imgAreaSelect with Lightbox

Advanced Usage

Animated Selection Area

The code below extends the basic plugin, adding a new API method animateSelection(), which is similar to setSelection(), but it sets the new selection area with a graceful animation. You can couple this with the fade effect (as demonstrated below) for an even more eye-pleasant result.

The example might look a bit complicated, but it actually relies on a simple technique of piggybacking on jQuery's animate() method. The idea is nicely explained in Steven Wittens' blog post Abusing jQuery.animate for fun and profit (and bacon).

$.extend($.imgAreaSelect.prototype, {
    animateSelection: function (x1, y1, x2, y2, duration) {
        var fx = $.extend($('<div/>')[0], {
            ias: this,
            start: this.getSelection(),
            end: { x1: x1, y1: y1, x2: x2, y2: y2 }
        });

        $(fx).animate({
            cur: 1
        },
        {
            duration: duration,
            step: function (now, fx) {
                var start = fx.elem.start, end = fx.elem.end,
                    curX1 = Math.round(start.x1 + (end.x1 - start.x1) * now),
                    curY1 = Math.round(start.y1 + (end.y1 - start.y1) * now),
                    curX2 = Math.round(start.x2 + (end.x2 - start.x2) * now),
                    curY2 = Math.round(start.y2 + (end.y2 - start.y2) * now);
                fx.elem.ias.setSelection(curX1, curY1, curX2, curY2);
                fx.elem.ias.update();
            }
        });
    }
});

$(function () {
    ias = $('img#flower').imgAreaSelect({ fadeSpeed: 400, handles: true,
        instance: true });

    $('button#rectangle').click(function () {
        // If nothing's selected, start with a tiny area in the center
        if (!ias.getSelection().width)
            ias.setOptions({ show: true, x1: 199, y1: 149, x2: 200, y2: 150 });
        ias.animateSelection(100, 75, 300, 225, 'slow');
    });
});

Using imgAreaSelect with Lightbox

This example uses the jQuery lightbox plugin by Leandro Vieira Pinho.

function show() {
    if ($('#lightbox-image').is(':visible')) {
        $('#lightbox-image').imgAreaSelect({ 
            x1: 10, y1: 10, x2: 100, y2: 100, handles: true,
            parent: '#jquery-lightbox'
        });
        $('#jquery-lightbox').unbind('click');
        $('#lightbox-nav').remove();
    }
    else
        setTimeout(show, 50);
}

$(document).ready(function () {
    $('a[rel=lightbox]').lightBox();
    $('a[rel=lightbox]').click(show);
});