Rotating graphics

Forum Moderators: open

Message Too Old, No Replies

Rotating graphics

malochio

7:34 pm on Nov 28, 2005 (gmt 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

webdude

3:07 pm on Dec 1, 2005 (gmt 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;

-- Body tag

-- In body

webdude

3:08 pm on Dec 1, 2005 (gmt 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.

kbmcdowell

11:11 pm on Dec 20, 2005 (gmt 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

webdude

7:49 pm on Dec 21, 2005 (gmt 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.

adni18

1:47 am on Jan 5, 2006 (gmt 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]);
}

jollygoodfella

6:51 am on Jan 5, 2006 (gmt 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.

kbmcdowell

1:59 pm on Jan 5, 2006 (gmt 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.