having a div cycle through images on an auto timer

[leroi green]

not sure if this has been answered before. i looked through the jscript/dhtml spot and didn't see anything on the boards that looked solved so...

I want to put multiple pictures in a table, then put that table in a div and have an auto timer show them in sequence (or random... doesn't matter).

i figure there's a way to do this but i just can't get my finger on it. any help is mucho appreciated.

oh also, if there's jscript, ajax,css or whatever involved please let me know where to place said code.

thank you,

ps. if you have a link to anywhere that already explains please let me know

[almostbob]

In the in
or in an xtern file for re-use

NewImg = new Array (
"images/1.gif",
"images/2.gif",
"images/3.gif"
); 
/* as many or few images and the path to them */

var ImgNum = 0;
var ImgLength = NewImg.length - 1;
var delay = 3000; /* Time delay between Slides in milliseconds */
var lock = false;
var run;

function chgImg(direction) {
 if (document.images) {
  ImgNum = ImgNum + direction;
  if (ImgNum > ImgLength) {  ImgNum = 0; }
  if (ImgNum < 0) { ImgNum = ImgLength; }
 document.slideshow.src = NewImg[ImgNum]; 
 }
}

function auto() {
 if (lock == true) { 
  lock = false;
  window.clearInterval(run);
 }
 else if (lock == false) {
  lock = true;
  run = setInterval("chgImg(1)", delay);
 }
}

in the body where you want the slideshow to show

<div><img src="images/1.gif" name="slideshow">
<a href="javascript:chgImg(-1)">Previous</a> &nbsp;|&nbsp; 
<a href="javascript:auto()">Auto/Stop</a> &nbsp;|&nbsp; 
<a href="javascript:chgImg(1)">Next</a></div>

This is not the only javascript slideshow, this is the one I thought of today 11pm, I am certain its not original, i have typed it so many times, that I remember it,
there are thousands ofbetter freeware ones in Javascript repositories

[leroi green]

entered the code but it's giving an error when i select any of the links like "next, previous"

when i click: Safari gives and error page and shows nothing
Firefox just throws the first image under the div
IE8 says Internet Explorer cannot display the webpage

is it because i'm using png and not gif?

i put the jscript on another file and am referencing the file correctly but just not getting any love from the function. help?

[almostbob]

head slap moment, what you get when you dont read what you wrote

document.slideshow.src = NewImg[ImgNum]; 
/* should be */
document.getElementById('slideshow').src = NewImg[ImgNum];

this link will point you to a bunch of scripts, freeware, thatdo work
Hotscripts:: Javascript slideshow

[leroi green]

where do i place this?

in the #1,#2, and #3 for the jscript?

[almostbob]

where do i place this?

in the #1,#2, and #3 for the jscript?

the one that says document.slideshow.src = NewImg[ImgNum];
there is only one

[leroi green]

the one that says document.slideshow.src = NewImg[ImgNum]; there is only one

GOT IT! THANX FOR THE SUPER HELP!

[zdossa]

@almostbob: This is great and extremely helpful. If I wanted the images to transition into each other, is there a simple way to add this effect?

Also, to tell the slideshow which image to show (rather than next or previous), I can simply feed the image into: NewImg[ImgNum], correct?

I am trying to get the effect of: http://www.toms.com/eyewear/#!prettyPhoto/0/

Cheers,
Zahir