Slide Show Applications
OVERVIEW AND EXAMPLE

 

  
Building a slide-show application in JavaScript if fairly simple.  Basically, these are the steps required.

  1. The html page needs to provide a placeholder for the slide show image.

  2. Use JavaScript to preload a set of images to be used.

  3. Use JavaScript to write a function that will swap the images.  

  4. Use JavaScript to set a timer that will be called whenever the image needs to be swapped.

An example is shown above.  This example alternates between 2 images, but it's easy to add more.

IMPLEMENTATION

  
To accomplish Step1 above, first, you need to decide where to put the image within the html page.  The image should be placed using the IMG tag as usual.  However, you must also do one more thing.  JavaScript needs to know which IMG you want to use for the slideshow, so you must give the IMG tag a NAME and and ID.  In my example below, I use "myImage" as the NAME and ID.  

<IMG WIDTH=250 HEIGHT=250 ID="myImage" NAME="myImage"
  SRC="images/image0.gif"></IMG>

Ok, let's move on to the JavaScript side.  The source code for the JavaScript section is listed below.  This JavaScript code goes between the  <HEAD></HEAD> tag in the html page.  You can also see an example by viewing the source of this page.  

The cyan portion of the code accomplishes Step 2 of the requirements above.  It preloads two images that I want to use (notice that I set numImages=2).  This number can be changed, but the images must be named "image1.jpg," "image2.jpg," and so on for this code to work.  Note also that all my images are located in "images" folder.  You can also replace ".jpg" with ".gif" in the code if you wish to use gif files.   (What if the images are not named "image1.jpg", etc?  See below.)   

The images are stored by JavaScript on an Array called dimages.  An Array is an object that can have multiple indexed entities.  Since we'll be using more than one image, an Array is a good idea.  You can then access the images by dimages[0], dimages[1], and so on, depending on how many images you use.  

<SCRIPT LANGUAGE="JavaScript">
<!--
 
var dimages=new Array();
var numImages=2;
for (i=0; i<numImages; i++)
{
  dimages[i]=new Image();
  dimages[i].src="images/image"+(i+1)+".jpg";
}
var curImage=-1;

function swapPicture()
{
  if (document.images)
  {
    var nextImage=curImage+1;
    if (nextImage>=numImages)
      nextImage=0;
    if (dimages[nextImage] && dimages[nextImage].complete)
    {
      var target=0;
      if (document.images.myImage)
        target=document.images.myImage;
      if (document.all && document.getElementById("myImage"))
        target=document.getElementById("myImage");
  
      // make sure target is valid.  It might not be valid
      //   if the page has not finished loading
      if (target)
      {
        target.src=dimages[nextImage].src;
        curImage=nextImage;
      }
 
      setTimeout("swapPicture()", 5000);
 
    }
    else
    {
      setTimeout("swapPicture()", 500);
    }
  }
}
 
setTimeout("swapPicture()", 5000);
 
//-->
</SCRIPT>

The yellow portion of the code shows a function named swapPicture().  This function accomplishes Step 3 of the requirements above.  The code first check if the browser will allow JavaScript to change an image; this is just a safeguard so that the code won't cause an error on older browsers (such as Netscape 3).  

The code then increments a counter named curImage.  This counter keeps track of which image is currently showing and it will wrap around to 0 when all the images has been shown, then start over.   The code then checks if the nextImage image to be shown is ready (or has been loaded) in this line:  

if (dimages[nextImage] && dimages[nextImage].complete)
{
  ...
}
else
{
  setTimeout("swapPicture()", 500);
}

We need to do that check because some users might have slow modem connection.  What happens if the image is not ready?  Well, then the image won't be swapped, and the else portion of the code will be executed, on which I made the code check again in 500 milliseconds (half of a second).

After making sure that the image is ready,  the code then sets the target where that image is to be put into.  The target will be the <IMG> placeholder we specified earlier, which is called: "myImage"  If you change the name for the NAME and ID of the IMG tag, remember to change the JavaScript part too (the bold text below) ; otherwise JavaScript won't know where to put the image:

      var target=null;
      if (document.images.myImage)
        target=document.images.myImage;
      if (document.all && document.getElementById("myImage"))
        target=document.getElementById("myImage");

That was a bit long because we need to support older Netscape browser, too (I.e.: Netscape 4).

The next line puts the new image into the target placeholder:

      target.src=dimages[curImage].src;

The code then updates the counter so that it knows which image is currently showing:

      curImage=nextImage;

And set a time interval upon which to swap the image.  To swap the image, we'll be calling the "swapPicture()" function over and over:

      setTimeout("swapPicture()", 5000);

Here, I have 5000 milliseconds, which means the image will stay on the screen for 5 seconds.  You can change the number to anything you want.  

The pink area of the code above also calls setTimeout.  This is the call that will initiate the whole slideshow process.  (I use 5000 milliseconds which means the initial picture will be shown for 5 seconds.)   This step accomplishes Step 4 described in the overview section.

SOME NOTES

 

  • If your images are not named uniformly, you can specify the name for each images manually.  For example, if I want to use these three images: 
    title.gif, slide1.jpg, picture2.gif, ship.gif; and another image located at "../otherFolder/lastImage.jpg", then I'll replace the cyan portion of the code above with this:
  var dimages=new Array();
  var numImages=4;
  dimages[0]=new Image();
  dimages[0].src="title.gif";
  dimages[1]=new Image();
  dimages[1].src="slide1.jpg";
  dimages[2]=new Image();
  dimages[2].src="picture2.gif";
  dimages[3]=new Image();
  dimages[3].src="../otherFolder/lastImage.jpg";
  var curImage=-1;
  • The images must have the same dimension, otherwise they might not appear correctly.
  • Older JavaScript versions (prior to version 1.2 such as in Netscape 3!) does not support image object (or image swapping).  In that case, the slide show will do nothing.

(C) 2002 F. Permadi

<<INDEX>>
 Terms of Use