Welcome to WebmasterWorld Guest from 3.227.208.153

Forum Moderators: open

Message Too Old, No Replies

Rotating graphics

     
7:34 pm on Nov 28, 2005 (gmt 0)

New User

10+ Year Member

joined:Nov 22, 2005
posts:7
votes: 0


I'm looking for a script that will rotate 5 or 6 graphics in one cell of a table at an interval I can set. Captions would be great but are not necessary. The ability to make each of these graphics a link to a different area of my site would be ideal. Can anyone suggest such a script?
Thanks in advance,
Mal
3:07 pm on Dec 1, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 3, 2002
posts:894
votes: 0


Try This...

-- in header

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://mysite.com/img/01.jpg");
image_list[image_index++] = new imageItem("http://mysite.com/img/02.jpg");
image_list[image_index++] = new imageItem("http://mysite.com/img/03.jpg");
image_list[image_index++] = new imageItem("http://mysite.com/img/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);
}

-- Body tag

<BODY OnLoad="rotateImage('MyImage')">

-- In body

<center>
<img name="MyImage" src="http://mysite.com/img/01.jpg" width=120 height=90> <!-- Change width and height to match your image size. I would size all your images the same-->
</center>

3:08 pm on Dec 1, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 3, 2002
posts:894
votes: 0


oops... sorry. I should have read the rest of your post about linking and footers. The code I gave you is just a start.
11:11 pm on Dec 20, 2005 (gmt 0)

New User

10+ Year Member

joined:Dec 20, 2005
posts:3
votes: 0


Hello and thank you for the code.

I implemented this script no problem, and am happy with the results. I have a photo of a lighthouse that rotates between the regular photo, and the second photo has the light "photoshopped" on. This is rotated for 2 seconds... 2 seconds on, and then 2 seconds off.

Is there any way to change the length of time that one of the images shows? IE, to make one picture show for 3 seconds, and the other for 1 second?

kbmcdowell

7:49 pm on Dec 21, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 3, 2002
posts:894
votes: 0


Well without hacking up the code, you could add 4 images - 3 the same and the fourth different. Set the timer to 1 second each. That would show 1 image for 3 seconds and the other for 1 second.
1:47 am on Jan 5, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2004
posts:681
votes: 0


Just change the header code to:

intervals=new Array();

intervals[0]=2.5;
intervals[1]=1.5;
intervals[2]=4;
intervals[3]=1;

// delay between rotating images (in seconds). Make sure there are as many of these entries as there are of images.

var random_display = 1; // 0 = no, 1 = yes

var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("http://mysite.com/img/01.jpg");
image_list[image_index++] = new imageItem("http://mysite.com/img/02.jpg");
image_list[image_index++] = new imageItem("http://mysite.com/img/03.jpg");
image_list[image_index++] = new imageItem("http://mysite.com/img/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);
}
timesdone=-1;
maxtimes=image_list.length;

function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
if(timesdone==maxtimes)
{
timesdone=0;
}
else
{
timesdone++;
}

setTimeout(recur_call, intervals[timesdone]);
}

6:51 am on Jan 5, 2006 (gmt 0)

Junior Member from US 

10+ Year Member

joined:Feb 13, 2005
posts:101
votes: 0


I like the Banner Up! javascript by Heidi Allen which you could find here:

[simplythebest.net...]

Plus there are tons of other ones too. The banner up one I modified so handle several images rotating in and out with links to different places for each image, so its pretty versatile and not overwhelming tough to figure out.

1:59 pm on Jan 5, 2006 (gmt 0)

New User

10+ Year Member

joined:Dec 20, 2005
posts:3
votes: 0


adni18, thanks for the code, that worked for my purposes with only one modification. In order to have the rotation walk through exactly the number of images, I had to make this change to the maxtimes variable:

maxtimes=image_list.length-1;

Your variable caused all values in the array to display, plus one additional image again. So my images were displaying like this:

0,1,2,3,4,5,0
1,2,3,4,5,0,1
2,3,4,5,0,1,2

Apparently I can not post an outside link to show the resulting success, so I will not do so. Thanks again.