PDA

View Full Version : onClick image swaps with loop



jkap
09-11-2008, 07:52 PM
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="cursor:pointer;" />

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

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
09-11-2008, 09:31 PM
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
09-12-2008, 01:20 AM
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
09-12-2008, 01:49 PM
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
09-12-2008, 02:54 PM
Thanks so much for your help, everyone!! Hugely appreciated!

jkap
09-12-2008, 03:32 PM
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
09-12-2008, 03:50 PM
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
09-15-2008, 09:05 PM
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