Dynamic Drive DHTML Scripts- DHTML Slide Show Script

New Revised CSS Library Forums Web Tools

DHTML Slide Show Script

Author: Dynamic Drive

Description: If you ever need a manual slide show script, this is the one to use. We designed it to be highly versatile, lightweight, and functional in all browsers, even NS 3. Here are some attributes of this lively DHTML slideshow script:

Slideshow works in all NS 3+ and IE 4+ browsers (yes, that includes NS 6 as well)
Script can be set so each image is clickable with it's own unique URL (through the toggling of a single variable)
All images in the slideshow are automatically preloaded on page load to ensure a smooth transition between image changes.
Script displays in the status bar which image the user is currently viewing (image #)
IE 4+ users will see a special random effect applied to the show during each image slide

Enjoy.

Demo:


Previous Slide	Next Slide

Directions

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

Select All
<script type="text/javascript"> /*********************************************** * DHTML slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice must stay intact for legal use * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ var photos=new Array() var photoslink=new Array() var which=0 //define images. You can have as many as you want: photos[0]="photo1.jpg" photos[1]="photo2.jpg" photos[2]="photo3.jpg" //Specify whether images should be linked or not (1=linked) var linkornot=0 //Set corresponding URLs for above images. Define ONLY if variable linkornot equals "1" photoslink[0]="" photoslink[1]="" photoslink[2]="" //do NOT edit pass this line var preloadedimages=new Array() for (i=0;i<photos.length;i++){ preloadedimages[i]=new Image() preloadedimages[i].src=photos[i] } function applyeffect(){ if (document.all && photoslider.filters){ photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23) photoslider.filters.revealTrans.stop() photoslider.filters.revealTrans.apply() } } function playeffect(){ if (document.all && photoslider.filters) photoslider.filters.revealTrans.play() } function keeptrack(){ window.status="Image "+(which+1)+" of "+photos.length } function backward(){ if (which>0){ which-- applyeffect() document.images.photoslider.src=photos[which] playeffect() keeptrack() } } function forward(){ if (which<photos.length-1){ which++ applyeffect() document.images.photoslider.src=photos[which] playeffect() keeptrack() } } function transport(){ window.location=photoslink[which] } </script>

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

Select All
<table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%" colspan="2" height="22"><center> <script> if (linkornot==1) document.write('<a href="javascript:transport()">') document.write('<img src="'+photos[0]+'" name="photoslider" style="filter:revealTrans(duration=2,transition=23)" border=0>') if (linkornot==1) document.write('</a>') </script> </center></td> </tr> <tr> <td width="50%" height="21"><p align="left"><a href="#" onClick="backward();return false">Previous Slide</a></td> <td width="50%" height="21"><p align="right"><a href="#" onClick="forward();return false">Next Slide</a></td> </tr> </table> <p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br> <a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>

There are a few variables you'll need to define. Please refer to documentation inside the script.