How to implement an automatic slide show with links

This script was updated in October 2010 to provide a cross browser image fade effect. The original article can be found here. If you are upgrading to the new JavaScript then be sure to read this page in full, the key changes are the introduction of a <div> for the background for each image.

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:

1. A div, an image and link
2. JavaScript to run the slideshow
3. The images to be shown and links to be used

1. A div, an image and link

We need a div, an image and a link, all standard HTML constructs:

<div id="EmilyDiv">
  <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>
</div>

The <div> is simply a container. You can apply styles or classes to the div to change its appearance. In the example at the top of this page it is simply floated to the right of the page. You must have a <div> because without it the fade effect will be messed up.

The link is the link to a page (or image) that should be opened when the user clicks on the image. This must be assigned a unique id because the automatic slideshow will update this link each time a new image is shown.

The image is the initial image that the user will see when they open the page. Again this must be assigned a unique id because the automatic slideshow will need to change the image as the slide show progresses.

For the example above, the id for the div is "EmilyDiv", 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 JavaScript to run the slideshow. You can download the JavaScript for the automatic slideshow from this link.

Put the JavaScript file in the same folder as your HTML page and include the following HTML in your file above where you intend to use the automatic slideshow:

<script type="text/javascript" src="script16_slideshow_links.js"></script>

You only need to include this once even if you have multiple slideshows on the 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">
SlideShowWithLinks.Run("EmilyDiv","EmilyPicture","EmilyLink",
	"emily01.jpg;http://emily.cryer.org.uk/;" +
	"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 "SlideShowWithLinks.Run" function and below the image placeholder.

The "SlideShowWithLinks.Run" JavaScript function takes five values:

1. divID

   The divID is the unique identifier given to the div. This identifies the container in which the slideshow will run.

2. 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.

3. 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".)

4. 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:

   1. emily01.jpg, with a link to http://www.cryer.co.uk/emily.
   2. emily02.jpg, with a link to the same image file.
   3. emily03.jpg, with a link to the same image file.
   4. emily04.jpg, with a link to the same image file.
      
5. displaySecs

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

That's it.