onClick image swaps with loop

[jkap]

Hello,
I am new to javascript, wondering if someone can help..

I found the following script that changes an image every time you click on it.

++++++++++++++++++++++

<script type="text/javascript">
<!--

var oImgs = [];
oImgs[0] = "james.jpg"
oImgs[1] = "james1.jpg"
oImgs[2] = "james2.jpg"

for(var i=0;i<oImgs.length;i++){
var imgs = new Image();
imgs.src = "images/" + oImgs[i];
}

var x = 1;

function swapImg(){
var doc = document.getElementById("swap");
doc.src = "images/" + oImgs[x];
if(x<oImgs.length-1){
x ++;
}else{
x = 0;
}
}

//-->
</script>

<img id="swap" src="images/james.jpg" width="80" height="120" border="0" onclick="swapImg();" style="cursorointer;" />

+++++++++++++++++++++

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.

Thanks very much!

[shadowhunter]

Heres a simple class (javascript equivalent) I made that you could use.

//This class will manage cycling through a list of images
function ImageCollection(images) {
this.images = images;
this.i = 0;
this.next = function(img) {
this.i++;
if (this.i == images.length)
this.i = 0;
img.src = images[this.i];
}
}

/*
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)">

[magicyte]

Are the boxes seperate? I will assume they are. Feel free to modify the code to fit your needs, seperate boxes or not. Anyway, here is some code.

<script type="text/javascript">
<!--

var ima_a = new Array(4);
ima_a[0]= "images/redbox.jpg";
ima_a[1] = "images/square.jpg";
ima_a[2] = "images/circle.jpg";
var ima_b = new Array(4);
ima_b[0] = "images/bluebox.jpg";
ima_b[1] = "images/happy.jpg";
ima_b[2] = "images/sad.jpg";
var ima_c = new Array(4);
ima_c[0] = "images/greenbox.jpg";
ima_c[1] = "images/tree.jpg";
ima_c[2] = "images/flower.jpg";

function swapImg(x)
{
var red = 0, blue = 0, green = 0;
switch(x)
{
    case 0:
        if(red < ima_a.length-1) {
        red++;
        } else { red = 0; }
        document.getElementById("swap1").src = ima_a[red];
        // alert(red);
        break;
    case 1:
        if(blue < ima_b.length-1) {
        blue++;
        } else { blue = 0; }
        document.getElementById("swap2").src = ima_b[blue];
        // alert(blue);
        break;
    case 2:
        if(green < ima_c.length-1) {
        green++;
        } else { green = 0; }
        document.getElementById("swap3").src = ima_c[green];
        // alert(green);
        break;
    default:
        alert("We are sorry, but an error has occured on this page.");
        break;
}
}

//-->
</script>

<img id="swap1" src="images/redbox.jpg" width="80" height="120" border="0" onclick="swapImg(0);" style="cursor:default;" />

<img id="swap2" src="images/bluebox.jpg" width="80" height="120" border="0" onclick="swapImg(1);" style="cursor:default;" />

<img id="swap3" src="images/greenbox.jpg" width="80" height="120" border="0" onclick="swapImg(2);" style="cursor:default;" />

Hope this helped. It may not work, but I am pretty sure it will. If it doesn't just give me a heads-up.

-magicyte

[clueful]

With this code all you need add to the <img> tags is a unique ID.

This example controls cycling of images in two different image placeholders with IDs 'firstIimage' and 'secondImage'.

<script type='text/javascript'>

function CycleClick(imgHolder, imgArray)
{
 this.size=imgArray.length  
 this.data = [];
 this.pos = 0;  
 this.imgHolder = document.getElementById(imgHolder);
   
 for(var i=0, len=this.size; i<len; i++)
 {
  this.data[i] = new Image();  
  this.data[i].src = imgArray[i];
  
  this.imgHolder.onclick=(function(inst){return function()
  { 
   this.src = inst.data[inst.pos++].src; 
   inst.pos %= inst.size;      
  }})(this);
 }
   
}

new CycleClick("firstImage", [ "image1.gif", "image2.gif", "image3.gif" ] );

new CycleClick("secondImage", [ "image4.gif", "image5.gif", "image6.gif" ] );

// Add more here as required

[jkap]

Thanks so much for your help, everyone!! Hugely appreciated!

[jkap]

Are the boxes seperate? I will assume they are. Feel free to modify the code to fit your needs, seperate boxes or not. Anyway, here is some code.

<script type="text/javascript">
<!--

var ima_a = new Array(4);
ima_a[0]= "images/redbox.jpg";
ima_a[1] = "images/square.jpg";
ima_a[2] = "images/circle.jpg";
var ima_b = new Array(4);
ima_b[0] = "images/bluebox.jpg";
ima_b[1] = "images/happy.jpg";
ima_b[2] = "images/sad.jpg";
var ima_c = new Array(4);
ima_c[0] = "images/greenbox.jpg";
ima_c[1] = "images/tree.jpg";
ima_c[2] = "images/flower.jpg";

function swapImg(x)
{
var red = 0, blue = 0, green = 0;
switch(x)
{
    case 0:
        if(red < ima_a.length-1) {
        red++;
        } else { red = 0; }
        document.getElementById("swap1").src = ima_a[red];
        // alert(red);
        break;
    case 1:
        if(blue < ima_b.length-1) {
        blue++;
        } else { blue = 0; }
        document.getElementById("swap2").src = ima_b[blue];
        // alert(blue);
        break;
    case 2:
        if(green < ima_c.length-1) {
        green++;
        } else { green = 0; }
        document.getElementById("swap3").src = ima_c[green];
        // alert(green);
        break;
    default:
        alert("We are sorry, but an error has occured on this page.");
        break;
}
}

//-->
</script>

<img id="swap1" src="images/redbox.jpg" width="80" height="120" border="0" onclick="swapImg(0);" style="cursor:default;" />

<img id="swap2" src="images/bluebox.jpg" width="80" height="120" border="0" onclick="swapImg(1);" style="cursor:default;" />

<img id="swap3" src="images/greenbox.jpg" width="80" height="120" border="0" onclick="swapImg(2);" style="cursor:default;" />

Hope this helped. It may not work, but I am pretty sure it will. If it doesn't just give me a heads-up.

-magicyte

This is only cycling through 1 image - it goes from redbox.jpg to square.jpg and then its no longer clickable.

[jkap]

Heres a simple class (javascript equivalent) I made that you could use.

//This class will manage cycling through a list of images
function ImageCollection(images) {
this.images = images;
this.i = 0;
this.next = function(img) {
this.i++;
if (this.i == images.length)
this.i = 0;
img.src = images[this.i];
}
}

/*
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)">

This works perfectly! Thanks again!

[magicyte]

Sorry. I couldn't really get it to work on my browser. I figured it MAY have worked on yours (whatever it is). Once again, sorry.

-magicyte