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 four things are required:
- An image placeholder
- A background container for the image
- The images to be shown
This is a standard HTML image and is the image displayed before the slide show starts. The only things to bear 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">
A container is needed to hold an image behind the main image.
As an example, this page uses the following HTML for its background container:
<div id="EmilyPictureBackground"> <img alt="slide show" src="emily01.jpg" width="200" height="200" id="EmilyPicture"> </div>
In this example the html for the image is also included. This is because the container must contain the image. Be sure that you don't include the image twice or it will not work as you expect!
It is probably a good idea to size the container to the same height and width as the image. Otherwise if you play with alignment there is a risk that the image shown in the background container will not be aligned with the foreground image and the fade effect will be ruined.
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. You should not need to modify the above in any way.
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:
- The id 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:
- The id given to the image container. This identifies the container that holds the image.
- 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.
- This is the number of seconds that each image is to be displayed for.
A few other points to note for information:
- You can alter how quickly the image blend into each other by changing the
value for "FadeDurationMS". Simply edit the line:
Remembering that the duration is expressed in milli-seconds. This script uses 1000ms, or one second. So to use a two second delay set FadeDurationMS to 2000.
- The script used here is subtly different to the article "How to fade one image into another". That script loaded each new images into the foreground and the previous image into the background, fading in the new image. The script used here loads the new image into the background, the previous into the foreground and then fades out the foreground image. The end effect is the same. The reason why it is done differently here is because it was observed that in the FireFox browser (only) this could lead to flicker and doing it this way round avoided the flicker. It is possible but not proven that this flicker effect is a consequence of running more than one slide show on this page.
- 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 have two slideshows on a page and specify different display-durations
drift in and out of sync, for example:
3 seconds 4 seconds
- 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 then start
one of them via a timer. For example:
4 seconds 4 seconds, with 2 second delay at start
This script was updated in July 2008 to provide a cross browser image fade effect. The original article can be found here.