Question

I’m using the popular image selection jquery plugin imgAreaSelect – http://odyniec.net/projects/imgareaselect

The page could have any number of images so I have assigned a class to the image to enable the code on all of them.

$('img.select').imgAreaSelect({
...
});

The problem is once a selection has been made on any 1 of the images I want to prevent another selection being made on the remaining images on the page. Essentially I am looking to disable the plugin for all images apart from the one I have selected.

I will also want to be able to edit the selection again at some point using the coords which i’ve saved, so this is where the instance api comes in – http://odyniec.net/projects/imgareaselect/usage.html#api-methods

I’ll therefore be looking at doing something along the lines of

var select1 = $('img.select1').imgAreaSelect({
...
});

var select2 = $('img.select2').imgAreaSelect({
...
});

etc

The problem is a don’t have a defined number of images. Could i used something like $('img.select').each()? Still doesn’t help with appending a number to it though. I figure setting up the api instance part will help towards fixing my first issue.

My question is, how can I dynamically create an imgAreaSelect instance for each img on the page with a class of select (and probably with a number appended to it (which i’ve stored in the name attr)) and when an image is selected disable all other instances on the page? Thanks!

Answer 1

Ok so i’ve used .each() to go through each image and add the instance of imgAreaSelect into an array. From there i can make calls to whichever image i need.

var images = {};
var i = 1;
$('img.select').each(function (){
   images[i] = $('img.select.' + i).imgAreaSelect({
   ...
   });
   i++;
});

It may not be the best or most efficient way…looks pretty tidy to me though. Still open to suggestions.