How to implement a manual slide show

A slide show is where a number of images are displayed in sequence one after another. This article describes how to put together a slideshow where the viewer has to click on a link to view the next image in the sequence. A more common use of a slide show is where each image is shown after a brief delay with no intervention from the viewer - click the following link for guidance on how to implement an "automatic slide show".

An example of a "manual" slide show is shown below:

click here to see
the next picture

To achieve this effect three things are required:

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="1" src="emily01.jpg" width="200" height="200" id="EmilyPicture">

2. JavaScript to run the manual slideshow

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

// Manual 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 manualPictures = new Array();
function NextImageSlide(pictureName,imageFiles)
{
  // Ensure picture list primed.
  if (manualPictures[pictureName] == null) {
    manualPictures[pictureName] = imageFiles;
  } else {
    imageFiles = manualPictures[pictureName];
  }
  var imageSeparator = imageFiles.indexOf(";");
  var 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();
  }
  manualPictures[pictureName] =
    imageFiles.substring(imageSeparator+1,imageFiles.length)
    + ';' + nextImage;
}

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. Link and Images to be shown

The final step is to establish what images are to be shown as part of the slideshow and to define the link that will advance the slideshow. As an illustration, this page uses the following:

<a href="#_self"
  onclick="NextImageSlide('EmilyPicture','emily02.jpg;emily03.jpg;emily04.jpg;emily01.jpg')">
  click here to see<br>the next picture</a>

What this is doing is defining a link which refers to this same document (i.e. href="#_self"). The "onclick" event handler calls the JavaScript function define above.

The "RunSlideShow" JavaScript function takes two values:

1. pictureName The picture-name is the name given to the image. This is the name of 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").

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.

That's it. Other points to note:

You can alter how quickly the image blend into each other by changing the value for "blendTrans(duration=2)" in the script.
You can include as many manual slideshows as you want on a page, you only need to include the JavaScript function definition the once but will need to define an image and link for each. The only thing to note is that the JavaScript function requires that the "pictureName" parameter be unique, so each slideshow MUST use a different picture placeholder. For example: click here to advance

1.	pictureName	The picture-name is the name given to the image. This is the name of 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").
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.