How to implement a slide show that runs through once and then stops

A slide show is where a number of images are displayed in sequence one after another. Typically with a slide show after the first image is shown the slide show will loop back to the first once and start again - if this is the type of slide show you are after then click the following link for guidance: automatic slide show. This article provides a means to show a slideshow only the once, stopping after the last image, an example of which is shown here: (which should appear to slowly count down.)

To achieve this effect three things are required:

An image placeholder
JavaScript to run the slideshow
The images to be shown

1. An image placeholder

This is a standard HTML image and is the image displayed before the slide show starts. The only things to bare in mind are the height and width of the image must be pre-set and that the image must be given a unique id. These are dealt with below under step 3. As an example, this page uses the following HTML for its image:

<img border="0" src="http://www.cryer.co.uk/brian/images/5_key.gif" align="top" width="35" height="35" id="CountDown">

2. JavaScript to run the slideshow

This page uses the following JavaScript, which you are free to copy:

<script type="text/javascript">
// Browser Slide-Show script. With image cross fade effect for those browsers
// that support it.
// Script copyright (C) 2004-08 www.cryer.co.uk.
// Script is free to use provided this copyright header is included.
var slideCache = new Array();
function RunSlideShowAndStop(pictureName,imageFiles,displaySecs)
{
  var imageSeparator = imageFiles.indexOf(";");
  var nextImage = imageFiles;
  if (imageSeparator > 0)
    nextImage = imageFiles.substring(0,imageSeparator);
  var picture = document.getElementById(pictureName);
  if (picture.filters)
  {
    picture.style.filter="blendTrans(duration=2)";
    picture.filters.blendTrans.Apply();
  }
  picture.src = nextImage;
  if (picture.filters)
  {
    picture.filters.blendTrans.Play();
  }
  if (imageSeparator > 0)
  {
    var futureImages = imageFiles.substring(imageSeparator+1,imageFiles.length);
    setTimeout("RunSlideShowAndStop('"+pictureName+"','"+futureImages+"',"+displaySecs+")",
      displaySecs*1000);
    // Cache the next image to improve performance.
    imageSeparator = futureImages.indexOf(";");
    nextImage = futureImages.substring(0,imageSeparator);
    if (slideCache[nextImage] == null) {
      slideCache[nextImage] = new Image;
      slideCache[nextImage].src = nextImage;
    }
  }
}
</script>

If this script were to be used in a number of pages then it might be best included in a separate script file instead of being embedded directly in a web page.

3. Images to be shown

The final step is to establish what images are to be shown as part of the slideshow and how long each image is to be displayed before moving onto the next one. As an illustration, this page uses the following:

<script type="text/javascript">
RunSlideShowAndStop("CountDown",
  "http://www.cryer.co.uk/brian/images/5_key.gif;" +
  "http://www.cryer.co.uk/brian/images/4_key.gif;" +
  "http://www.cryer.co.uk/brian/images/3_key.gif;" +
  "http://www.cryer.co.uk/brian/images/2_key.gif;" +
  "http://www.cryer.co.uk/brian/images/1_key.gif;" +
  "http://www.cryer.co.uk/brian/images/end_key.gif",4);
</script>

This line should be included in the HTML file after the JavaScript that defines the "RunSlideShowAndStop" function and below the image placeholder.

The "RunSlideShowAndStop" JavaScript function takes three values:

1.

pictureName
The picture-name is the identifying name given to the image. This identifies the image in which to run the slide show. This image will be replaced with each slide show image in turn. (The name was specified as part of step 1 above "An image placeholder"). In HTML the picture name is specified by including a statement of the form:
id="pictureName"
in the img declaration statement.
2. imageFiles This is a string containing the names of the source files for each image to be displayed. Include a semi-colon (';') as a separator between the names of each image file.
It is very important that each image is the same size (height and width) as the original - or that it has the same aspect ratio (ratio of height to width) as the original. This is because each image is loaded into the same area or space that the original image occupied. If this images are not the same size then the browser will stretch the image to fit (and for example thus give the impression of very fat or very thin people) and this may be undesirable.

3. displaySecs This is the number of seconds that each image is to be displayed for.

That's it.

Other points to note

Should you need to restart the slideshow then you will need to the RunSlideShowAndStop function again. For example:

Slideshow:

The only problem with this is that if you trigger the restart before the previous slide show has completed then you will end up having both running and trying to update the image. It will run, but just look a little odd!