How to implement an automatic slide show with links

An updated version of this slide show script (published October 2010), providing cross browser fade effects (the fade effect used here only works with Internet Explorer) can be found here. This copy is maintained here for historical purposes only.

A slide show is where a number of images are displayed in sequence one after another. An example is shown here to the right of this paragraph.

This article (and example) differ from the classic article "How to implement an automatic slide show", because behind each image is a link. There is an example of this on the right - click on the image to follow the link defined for that image (one is to a web page the other links just open the picture in the browser).

To achieve this effect three things are required:

An image placeholder and link
JavaScript to run the slideshow
The images to be shown and links to be used

1. An image placeholder and link

Firstly we need an image and a link, with the image inside the link. This is standard HTML for an image and link. It is the image (and link) used 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 and link must each be given unique ids. These are dealt with below under step 3. As an example, this page uses the following HTML for its image and link:

<a id="EmilyLink" href="http://www.cryer.co.uk/emily">
  <img border="1" src="emily01.jpg" width="200" height="200" id="EmilyPicture" align="right">
</a>

So for this page, the id for the link is "EmilyLink" and the id for the image is "EmilyPicture". These ids are used in the JavaScript to refer to the image and link to be updated as the slide show runs.

2. JavaScript to run the slideshow

This page uses the following JavaScript, which you are free to copy (but please include an acknowledgement):

<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 RunSlideShowWithLinks(pictureID,linkID,imageLinks,displaySecs)
{
  var separator = imageLinks.indexOf(";");
  var nextImage = imageLinks.substring(0,separator);
  if (slideCache[nextImage] && slideCache[nextImage].loaded)
  {
    var futureImages = imageLinks.substring(separator +1,imageLinks.length) + ';' + nextImage;
    separator = futureImages.indexOf(";");
    var nextLink = futureImages.substring(0,separator);
    futureImages= futureImages.substring(separator +1,imageLinks.length) + ';' + nextLink;
    var picture=document.getElementById(pictureID);
    if (picture.filters)
    {
      picture.style.filter="blendTrans(duration=2)";
      picture.filters.blendTrans.Apply();
    }
    picture.src = nextImage;
    document.getElementById(linkID).href = nextLink;
    if (picture.filters)
    {
      picture.filters.blendTrans.Play();
    }
    setTimeout("RunSlideShowWithLinks('"+pictureID+"','"+linkID+"','"+futureImages+"',"+displaySecs+")",
     displaySecs*1000);
    // Identify the next image to cache.
    separator = futureImages.indexOf(";");
    nextImage = futureImages.substring(0,separator);
  } else {
    setTimeout("RunSlideShowWithLinks('"+pictureID+"','"+linkID+"','"+imageLinks+"',"+displaySecs+")",250);
  }
  // Cache the next image to improve performance.
  if (slideCache[nextImage] == null) {
    slideCache[nextImage] = new Image;
    slideCache[nextImage].loaded = false;
    slideCache[nextImage].onload = function(){this.loaded=true};
    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 and links to be used

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

<script type="text/javascript">
RunSlideShowWithLinks("EmilyPicture","EmilyLink",
	"emily01.jpg;http://www.cryer.co.uk/emily;" +
	"emily02.jpg;emily02.jpg;" +
	"emily03.jpg;emily03.jpg;" +
	"emily04.jpg;emily04.jpg",5);
</script>

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

The "RunSlideShowWithLinks" JavaScript function takes four values:

1.

pictureID
The pictureID is the unique identifier 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 ID was specified as part of step 1 above "An image placeholder and link".) In the HTML the picture name is specified by including a statement of the form:
id="pictureName"
in the img declaration statement.
2. linkID The linkID is the unique identifier given to the link. This identifies the link that is to be updated as the slide show runs. (The ID was specified as part of step 1 above "An image placeholder and link".)

3. imageLinks This is a string containing the names of the source files for each image to be displayed and the link to associate with each one. It should be build up containing the path to the image file, followed by a semi-colon, followed by the link that goes with the image, followed by a semi-colon then the next image and link pair and so on.
Note that the final semi-colon should be omitted. If you place a semi-colon at the end of the string then the slideshow will play through once and stop.

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.

So, in the example above, four images and four links are defined:

emily01.jpg, with a link to http://www.cryer.co.uk/emily.

emily02.jpg, with a link to the same image file.

emily03.jpg, with a link to the same image file.

emily04.jpg, with a link to the same image file.

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

That's it.

1.	pictureID	The pictureID is the unique identifier 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 ID was specified as part of step 1 above "An image placeholder and link".) In the HTML the picture name is specified by including a statement of the form: id="pictureName" in the `img` declaration statement.
2.	linkID	The linkID is the unique identifier given to the link. This identifies the link that is to be updated as the slide show runs. (The ID was specified as part of step 1 above "An image placeholder and link".)
3.	imageLinks	This is a string containing the names of the source files for each image to be displayed and the link to associate with each one. It should be build up containing the path to the image file, followed by a semi-colon, followed by the link that goes with the image, followed by a semi-colon then the next image and link pair and so on. Note that the final semi-colon should be omitted. If you place a semi-colon at the end of the string then the slideshow will play through once and stop. 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. So, in the example above, four images and four links are defined: emily01.jpg, with a link to http://www.cryer.co.uk/emily. emily02.jpg, with a link to the same image file. emily03.jpg, with a link to the same image file. emily04.jpg, with a link to the same image file.
4.	displaySecs	This is the number of seconds that each image is to be displayed for.