How to implement an automatic slide show
An updated version of this slide show script (published July 2008), 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.
To achieve this effect three things are required:
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">
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.
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:
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 the HTML the picture name is specified by including a statement of the form:id="pictureName"
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.
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.
- If you require two or more slide shows on the same page then just include more "RunSlideShow(..." lines (as in step 3 above).
- If you want to have two (or more) slideshows but stagger them - so they both have the same display-duration, but are always out of step (for example and ) then start one of them off via a timer for example: