• 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, {
    animate: function (fx) {
        var start = fx.elem.start, end = fx.elem.end, now = fx.now,
            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();
    },
    prototype: $.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 }
            });

            if (!$.imgAreaSelect.fxStepDefault) {
                $.imgAreaSelect.fxStepDefault = $.fx.step._default;
                $.fx.step._default = function (fx) {
                    return fx.elem.ias ? $.imgAreaSelect.animate(fx) :
                        $.imgAreaSelect.fxStepDefault(fx);
                };
            }
            
            $(fx).animate({ cur: 1 }, duration, 'swing');
        }
    })
});

$(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);
});