PDA

Click to See Complete Forum and Search --> : Image rotator - BUT need it to show multiple images

jmwebguy
02-25-2003, 05:39 PM
I am using a basic image rotator script found online. It works fine. But what I need is to show 4 images on the page, and have all 4 of those rotate the images I have defined in the script.

My script in between the HEAD:
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Robert Bui (astrogate@hotmail.com) -->
<!-- Web Site: http://astrogate.virtualave.net -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var interval = 2.5; // delay between rotating images (in seconds)
var random_display = 1; // 0 = no, 1 = yes
interval *= 1000;

var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/01.jpg");
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/02.jpg");
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/03.jpg");
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/04.jpg");
var number_of_image = image_list.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call, interval);
}
// End -->
</script>




BODY statement:
<BODY bgColor=navy leftMargin=0 topMargin=0 marginwidth="0" marginheight="0" OnLoad="rotateImage('rImage')">


AND TO SHOW THE IMAGES:
<img name="rImage" src="http://javascript.internet.com/img/image-cycler/01.jpg" width=120 height=90>



Now, how would I show 4 images and have them all rotate the images I defined above?
Jona
02-25-2003, 07:41 PM
Maybe...

var image_list2 = new Array();
image_list2[image_index++] = new imageItem("image.jpg");
image_list2[image_index++] = new imageItem("image2.jpg");
//etc.

<BODY bgColor=navy leftMargin=0 topMargin=0 marginwidth="0" marginheight="0" OnLoad="rotateImage('rImage','rImage2','rImage3')">

<img name="rImage2" src="img.jpg" width=120 height=90>

<img name="rImage3" src="img2.jpg" width=120 height=90>

<!-- add as many images as you want -->
jdavia
02-25-2003, 11:00 PM
Originally posted by jmwebguy
I am using a basic image rotator script found online. It works fine. But what I need is to show 4 images on the page, and have all 4 of those rotate the images I have defined in the script.

Rather than trying to convert yours try this. Just edit the image names and location if need be.

<html>
<head>
<title>(Random Images)</title>

<!-- This goes in the HEAD section -->
<SCRIPT LANGAUAGE=JAVASCRIPT>

var randPics = new Array("image1.jpg","image2.jpg",
"image3.jpg","image4.jpg","image5.jpg")
var picCt = randPics.length

var randPics2 = new Array("image1.jpg","image2.jpg",
"image3.jpg","image4.jpg","image5.jpg")
var picCt2 = randPics2.length

var randPics3 = new Array("image1.jpg","image2.jpg",
"image3.jpg","image4.jpg","image5.jpg")
var picCt3 = randPics3.length

var randPics4 = new Array("image1.jpg","image2.jpg",
"image3.jpg","image4.jpg","image5.jpg")
var picCt4 = randPics4.length

function picSpin() {
var randNum = Math.floor((Math.random() * picCt))
document.randomPic.src = randPics[randNum]
}

function picSpin2() {
var randNum2 = Math.floor((Math.random() * picCt2))
document.randomPic2.src = randPics2[randNum2]
}

function picSpin3() {
var randNum3 = Math.floor((Math.random() * picCt3))
document.randomPic3.src = randPics3[randNum3]
}

function picSpin4() {
var randNum4 = Math.floor((Math.random() * picCt4))
document.randomPic4.src = randPics4[randNum4]
}
</SCRIPT>

<!-- This goes in the BODY section -->
<BODY onLoad=" picSpin();picSpin2(),picSpin3();picSpin4()">
<!- Do not change below -->
<IMG SRC="images/spacer.jpg" WIDTH=100 HEIGHT=100 NAME="randomPic"><BR>
<IMG SRC="images/spacer.jpg" WIDTH=100 HEIGHT=100 NAME="randomPic2"><BR>
<IMG SRC="images/spacer.jpg" WIDTH=100 HEIGHT=100 NAME="randomPic3"><BR>
<IMG SRC="images/spacer.jpg" WIDTH=100 HEIGHT=100 NAME="randomPic4"><BR>
</body>
</html>
jmwebguy
02-26-2003, 07:30 AM
First, THANK YOU for your help, and I hate to ask for more. But these do not rotate every 2-3 seconds. And maybe I did not clarify myself in my original email. For that I apologize. But, what I would like is for ever x seconds, to have the images rotate between the images I put in the array. Is that possible?

Thanks.
jmwebguy
02-26-2003, 08:04 AM
The original author has taken care of my issues. In case anyone wants it, the URL for this script is at
http://astrogate.virtualave.net/index.html?software_development.html&

THANKS AGAIN!
Jona
02-26-2003, 07:53 PM
Originally posted by jdavia
Rather than trying to convert yours try this. Just edit the image names and location if need be.

jdavia, I was just thinking about your script. I always use two variables, instead of three, for randomness. As such:


var randPics = new Array("image1.jpg","image2.jpg",
"image3.jpg","image4.jpg","image5.jpg")
var picCt = Math.floor(Math.random()*(randPics.length))

function picSpin(){document.randomPic.src=randPics[picCt]}


I just thought I'd throw that out there...
MUE
07-28-2005, 03:13 PM
Hello, I'm looking for the same solution as jmwebguy was. I don't know much at all about javascript really, and I've been trying to modify the original basic Random Image Rotator. Can anyone help? The links to Robert Bui don't work. Well, they lead to a page that say "Forbidden."
vwphillips
07-28-2005, 03:58 PM
just playing with this one



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body onload="InitRImgs('MyImgs');" >
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
var ImgAry=new Array('Zero.gif','One.gif','Two.gif','Three.gif','Four.gif','Five.gif');
var Delay=2000;


var Imgs,TO;


// Randomise Function *****************************************************************************
// executed by call
// amRandomise(*My Array*);
// where
// *My Array* = the array to be sorted in a random sequence.

function amRandomise(amAry){
amT0=0;
amTempAry0=new Array();
for (am1=0;am1<amAry.length;am1++){
amTempAry0[am1]='^';
}
while (amT0<amAry.length){
amTemp=Math.floor(Math.random()*amAry.length-1)+1;
if (amTempAry0[amTemp]=='^'){amTempAry0[amTemp]=amAry[amT0]; amT0++; }
}
return amTempAry0;
}

function InitRImgs(id){
Imgs=document.getElementById(id).document.getElementsByTagName('IMG');
Rotate();
}

function Rotate(){
for (i=0;i<Imgs.length;i++){
Imgs[i].src=ImgPath+ImgAry[i];
}
ImgAry=amRandomise(ImgAry);
TO=setTimeout('Rotate()',Delay);
}

/*]]>*/
</script>

<span id="MyImgs" >
<img src="Blank.gif" width=50 height=50 />
<img src="Blank.gif" width=50 height=50 />
<img src="Blank.gif" width=50 height=50 />
<img src="Blank.gif" width=50 height=50 />
</span>

</body>
</html>
MUE
08-01-2005, 02:06 PM
Thanks! I'll give it a try.