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
  • 604 Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by zdossa

Dani AI

Generated

Short summary and immediate checks: the errors you saw usually come from the script running before the page elements exist or from a missing/invalid external file, not from using PNG vs GIF. ’s selector fix solved ’s case — if your slideshow still breaks, open the browser developer tools (Console + Network) first and look for JavaScript exceptions or 404s for the .js or image files.

Quick troubleshooting checklist

  • Console: note the exact error and line number.
  • Network: confirm the .js and images return HTTP 200.
  • Selector/markup: make sure the ID/class you target actually exists in the HTML at the time the script runs.
  • Script timing: either put the script tag just before </body> or wrap your code in a DOMContentLoaded / window.onload handler.
  • File issues: confirm the external .js is uploaded correctly and contains no stray characters (UTF-8 BOMs can sometimes cause odd failures).

Simple, robust pattern (fade + jump-to-image)

  • put all images in the slider container (stacked), use CSS opacity transitions, and toggle a single “active” class from JS.
  • call a small show(index) function to jump to any image (useful for ’s “show this image” request).
    Example pattern:
<div id="slider">
  <img src="images/a.png" class="active">
  <img src="images/b.png">
  <img src="images/c.png">
</div>
#slider{position:relative;overflow:hidden;}
#slider img{position:absolute;left:0;top:0;width:100%;opacity:0;transition:opacity .6s;}
#slider img.active{opacity:1;}
(function(){
  var slides = document.querySelectorAll('#slider img'), i=0;
  function show(n){
    slides[i].className = slides[i].className.replace(/\bactive\b/g,'').trim();
    i = (n + slides.length) % slides.length;
    slides[i].className += ' active';
  }
  setInterval(function(){ show(i+1); }, 3000); // change delay as needed
  // call show(2) to jump to the 3rd image
})();

Extras: preload images to avoid flicker, keep controls accessible (buttons with labels), and avoid using table layout for slides — CSS positioning is simpler and more predictable.

Recommended Answers

All 7 Replies

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

: 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:

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.