: This template enables an automated (self-advancing) sequential
slideshow including an optional DOM enabled automated label function.
Note that the label function will gracefully fail
in non-DOM compliant browsers. However, the
image swap portion of the script will continue
to function in NS 2+/IE 3+ browsers
The application includes two groups of scripts: (1) a set of generic drivers found in autoslide.js and (2) a set of user defined values, unique to the slideshow.
The user defined values should be pasted between script tags in the head of the document hosting the slideshow:
var slides=new Array([images]);
var labels=new Array([labels]);
Here is a quick explantion of these values and how they are to be configured
The variable slides is an array (list) used to store a list of image source file locations to be used in the animation.
Images are added to the array in the order in which they should appear in the animation, enclosed by quotation marks ("") and separated by commas (,)
The variable labels is an array (list) used to store a list of descriptive labels associated with the images to be used in the animation.
var slides=new Array("images/gif1.gif","images/gif2.gif","images/gif3.gif");
Labels are added to the array in the order in which they should appear in the animation, enclosed by quotation marks ("") and separated by commas (,)
The variable uselabels is boolean value that tells the drivers whether or not this version of the application will use the label feature (true | false).
var labels=new Array("Label 1","Label 2","Label 3");
The variable interval is a number representing the number of milliseconds each image in the animation should hold the frame before the auto-advance routine is called.
var uselabels=true; // will use label feature
var uselabels=false; // will not use label feature
An HTML page hosting the animation includes at least: a body tag (calling the animation onload), an intial image (with the HTML NAME "slide") and a structural element to recieve the label (with the HTML ID "label")
<! INITIALIZE AUTORUN -->
<!-- THE IMAGE (NAMED SLIDE) -->
<img src=../images/slides/blank.jpg name=slide>
<!-- THE LABEL (ID'D LABEL) -->
<p align=center ID=label>
The HTML may also include a control (in this example an anchor link) calling a function named ToggleMode() which allows the viewer to stop and start the anitmation:
Selecting the mode control will stop a running animation. Selecting the mode control again will restart a paused animation.