Dynamic Drive DHTML Scripts- Preloaded Slide Show Script

New Revised CSS Library Forums Web Tools

Preloaded Slide Show Script

Description: A straightforward image slideshow with a unique preload feature. The script "silently" caches the next image in line as you're viewing the current. This ensures a smooth transition between images without the script having to preload all participating images of the slideshow all at once.

Demo:

Directions

Step 1: Add the below into the <head> section of your page:

Select All
<script language="JavaScript"> //Preloaded slideshow script- By Jason Moon //For this script and more //Visit http://www.dynamicdrive.com // PUT THE URL'S OF YOUR IMAGES INTO THIS ARRAY... var Slides = new Array('image1.gif','image2.gif','image3.gif'); // DO NOT EDIT BELOW THIS LINE! function CacheImage(ImageSource) { // TURNS THE STRING INTO AN IMAGE OBJECT var ImageObject = new Image(); ImageObject.src = ImageSource; return ImageObject; } function ShowSlide(Direction) { if (SlideReady) { NextSlide = CurrentSlide + Direction; // THIS WILL DISABLE THE BUTTONS (IE-ONLY) document.SlideShow.Previous.disabled = (NextSlide == 0); document.SlideShow.Next.disabled = (NextSlide == (Slides.length-1)); if ((NextSlide >= 0) && (NextSlide < Slides.length)) { document.images['Screen'].src = Slides[NextSlide].src; CurrentSlide = NextSlide++; Message = 'Picture ' + (CurrentSlide+1) + ' of ' + Slides.length; self.defaultStatus = Message; if (Direction == 1) CacheNextSlide(); } return true; } } function Download() { if (Slides[NextSlide].complete) { SlideReady = true; self.defaultStatus = Message; } else setTimeout("Download()", 100); // CHECKS DOWNLOAD STATUS EVERY 100 MS return true; } function CacheNextSlide() { if ((NextSlide < Slides.length) && (typeof Slides[NextSlide] == 'string')) { // ONLY CACHES THE IMAGES ONCE SlideReady = false; self.defaultStatus = 'Downloading next picture...'; Slides[NextSlide] = CacheImage(Slides[NextSlide]); Download(); } return true; } function StartSlideShow() { CurrentSlide = -1; Slides[0] = CacheImage(Slides[0]); SlideReady = true; ShowSlide(1); } </script>

Step 2: Insert the following where you wish the slideshow to appear in the BODY:

You should change the width/height attributes inside the <IMG> to the dimensions of the first image.

Step 3: Finally, inside the BODY tag itself, add this event handler:

<body onLoad="StartSlideShow()">

Slide away!