Tutorials - JavaScript: Image slide show

Adding a JavaScript slide show to a page is a nice interactive way to display pictures or provide a picture tour of a campus. Below is the JavaScript and HTML to incorporate such an element into your Web page. You can also view the Sacramento State picture tour. Keep in mind that all the images used in your slide show should be the same size.

Step 1

Copy the JavaScript from the box below and paste it into the <head> section of your HTML document.

<script language="JavaScript" type="text/javascript">  function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i>a.length&& (x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v3.0 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i>d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } // --> </script>

Step 2

Change the references to the images to match your image file names and directory structure. Here is the text from above, now in bold, that you need to change.

var imagePath = "images/";
pictures = new Array("picture.jpg", "picture2.jpg", "picture3.jpg", "picture4.jpg","picture5.jpg");
viewedPics = new Array();

Step 3

Copy the JavaScript from the box below and paste it into the <body> section of your HTML document where you want to place the image slide show.

<a name="slideshow"></a> <a onmouseover="window.status='Click to view CSUS'; return true" onclick="pickOne()" onmouseout="window.status=''; return true" href="#slideshow"> <img src="images/picture.jpg" alt="Click here to view the sample CSUS slideshow" name="SlideShow" width="285" height="162" border="0" id="SlideShow" /></a>

Step 4

Change the reference to the folder and file where your first image is located, and the alternate text to appear in the browser. Here is the text from above, now in bold, that you need to change.

<a name="slideshow"></a>
<a onmouseover="window.status='Click to view CSUS'; return true" onclick="pickOne()" onmouseout="window.status=''; return true" href="#slideshow">
<img src="images/picture.jpg" alt="Click here to view the sample CSUS slideshow" name="SlideShow" width="285" height="162" border="0" id="SlideShow" /></a>

Example

Click here to view the sample CSUS slideshow

Sacramento State Campus Slide Show
(click to change image)

last reviewed: January 25, 2008