Member Avatar for 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

  • 3 Contributors
  • 7 Replies
  • 540 Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by zdossa
Member Avatar for almostbob

In the <head>in <script></script>
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"><br>
<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 of better freeware ones in Javascript repositories

Member Avatar for 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?

Member Avatar for 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, that do work
Hotscripts:: Javascript slideshow

Member Avatar for leroi green

where do i place this?

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

Member Avatar for 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

Member Avatar for leroi green

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

GOT IT! THANX FOR THE SUPER HELP!

Member Avatar for 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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.