Dynamic Drive DHTML Scripts- Presentational Slideshow Script

New Revised CSS Library Forums Web Tools

Presentational Slideshow Script

Author: Dynamic Drive

Description: We got our inspiration for this script from the frontpage of MSNBC (midpage), where they use a similar device to scroll through pictures. Well, as the name implies, this cool script displays and rotates images in a "presentational", left right sliding manner. Images can be individually set to be linked or not.

This script works across all DHTML browsers, with the presentational effect visible in IE4+, NS6+, and Opera7+. And if we dare say so ourselves, cool!

Demo (2nd image not linked):

Directions

Simply add the below where you wish the slideshow to appear:

Select All
<script language="JavaScript1.2"> //Presentational Slideshow Script- By Dynamic Drive //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com //This credit MUST stay intact for legal use var slideshow_width='100px' //SET SLIDESHOW WIDTH (set to largest image's width if multiple dimensions exist) var slideshow_height='100px' //SET SLIDESHOW HEIGHT (set to largest image's height if multiple dimensions exist) var pause=3000 //SET PAUSE BETWEEN SLIDE (2000=2 seconds) var slidebgcolor="white" var dropimages=new Array() //SET IMAGE PATHS. Extend or contract array as needed dropimages[0]="image1.gif" dropimages[1]="image2.gif" dropimages[2]="image3.gif" var droplinks=new Array() //SET IMAGE URLs. Use "" if you wish particular image to NOT be linked: droplinks[0]="http://www.yahoo.com" droplinks[1]="" droplinks[2]="http://www.google.com" ////NO need to edit beyond here///////////// var preloadedimages=new Array() for (p=0;p<dropimages.length;p++){ preloadedimages[p]=new Image() preloadedimages[p].src=dropimages[p] } var ie4=document.all var dom=document.getElementById if (ie4||dom) document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div></div>') else document.write('<a href="javascript:rotatelink()"><img name="defaultslide" src="'+dropimages[0]+'" border=0></a>') var curpos=parseInt(slideshow_width)*(-1) var degree=10 var curcanvas="canvas0" var curimageindex=linkindex=0 var nextimageindex=1 function movepic(){ if (curpos<0){ curpos=Math.min(curpos+degree,0) tempobj.style.left=curpos+"px" } else{ clearInterval(dropslide) nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1" tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas) var slideimage='<img src="'+dropimages[curimageindex]+'" border=0>' tempobj.innerHTML=(droplinks[curimageindex]!="")? '<a href="'+droplinks[curimageindex]+'">'+slideimage+'</a>' : slideimage nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0 setTimeout("rotateimage()",pause) } } function rotateimage(){ if (ie4||dom){ resetit(curcanvas) var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.style.zIndex++ var temp='setInterval("movepic()",50)' dropslide=eval(temp) curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0" } else document.images.defaultslide.src=dropimages[curimageindex] linkindex=curimageindex curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0 } function rotatelink(){ if (droplinks[linkindex]!="") window.location=droplinks[linkindex] } function resetit(what){ curpos=parseInt(slideshow_width)*(-1) var crossobj=ie4? eval("document.all."+what) : document.getElementById(what) crossobj.style.left=curpos+"px" } function startit(){ var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.innerHTML='<a href="'+droplinks[curimageindex]+'"><img src="'+dropimages[curimageindex]+'" border=0></a>' rotateimage() } if (ie4||dom) window.onload=startit else setInterval("rotateimage()",pause) </script> <p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br> <a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>

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