odyniec.net

imgAreaSelect Home

imgAreaSelect Examples

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

Click the buttons to set the selection.

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