If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

This script works perfectly for me, but I would like to have multiple instances of this script, using different images for every instance.

For example, I have 3 boxes - red, blue, green
- if you click on the red box, it loops through a square, a circle and back to a red box
- if you click on the blue box, it loops through a happy face, a sad face, and back to a blue box
- if you click on a green box, it loops through a tree, a flower, and back to a green box

I am not looking for a timed loop, or anything like that. I would like to just click on the image to swap it. Once it is clicked 3 times, it returns to the original image.
How can I go about using this script for different mini image galleries, as mentioned above?
Sorry for this long winded explanation.

/*
Create an ImageCollection object for each image gallery.
Pass each one an array of image urls to be scrolled through
*/
var ic1 = new ImageCollection(['img1.jpg','img2.jpg', 'img3.jpg']);
var ic2 = new ImageCollection(['img1.jpg','img2.jpg', 'img3.jpg']);

put the following into your html where you want the clickable images
<img src='img1.jpg' onclick="ic1.next(this)">
<img src='img1.jpg' onclick="ic2.next(this)">

/*
Create an ImageCollection object for each image gallery.
Pass each one an array of image urls to be scrolled through
*/
var ic1 = new ImageCollection(['img1.jpg','img2.jpg', 'img3.jpg']);
var ic2 = new ImageCollection(['img1.jpg','img2.jpg', 'img3.jpg']);

put the following into your html where you want the clickable images
<img src='img1.jpg' onclick="ic1.next(this)">
<img src='img1.jpg' onclick="ic2.next(this)">