Image Slide Show

A script that allows you to display an image slide show, plus captions below the images. Can be set to use a timer, or buttons can be used to control the slide show.

Script Code

Grab a copy of the file below and place it in the same directory as the Web page on which you will use the script (if you wish to place the script file in a different directory you will need to make the necessary adjustments to the src attribute of the script tag that calls it).

simage4.js

The code below should be placed between the <body> and </body> tags where you want the images to appear.

Example

A working sample of the script is shown below. Watch or try the controls to test it!

Face

Options

The centering/borders etc. of the image and the appearance of the text can be set by adding and editing the slide_show id and/or the user_controls id (for the buttons) in your CSS style sheet.

The image code in the HTML file is for a default image/text to display in case JavaScript is turned off in the user's browser.

Additional images can be added to the slide show by editing the JavaScript code. Example code to add a sixth image:

/* Set image URLs */
my_imgs[0] = "../../images/scare.jpg";
my_imgs[1] = "../../images/scare2.jpg";
my_imgs[2] = "../../images/scare3.jpg";
my_imgs[3] = "../../images/scare4.jpg";
my_imgs[4] = "../../images/scare5.jpg";
my_imgs[5] = "sixth_image_url.jpg";

/* Set text to display under each image */
my_imgs_text[0] = "Face";
my_imgs_text[1] = "Face 2";
my_imgs_text[2] = "Face 3. Yikes!";
my_imgs_text[3] = "Face 4";
my_imgs_text[4] = "Face 5";
my_imgs_text[5] = "Face 6";

/* Set alt text for each image */
my_imgs_alt[0] = "Face";
my_imgs_alt[1] = "Face 2";
my_imgs_alt[2] = "Face 3";
my_imgs_alt[3] = "Face 4";
my_imgs_alt[4] = "Face 5";
my_imgs_alt[5] = "Face 6";

Note that each image URL, description text, and alt text will need to be added. The image URLs will need to be adjusted to fit your site. Also, the number in brackets ([5] in this case) needs to be increased by one for each image/alt text added.

The timer can be set on or off by using 1 for on and 0 for off. If turned off, the user controls will allow the user to go through the slide show.

/* Set as 1 to turn the timer on, 0 (or anything else) to turn off
and have user controls only */
var timer_set = 1;

You can set the amount of time before the image changes to the next by setting the number of milliseconds (1000 milliseconds = 1 second).

/* Set timer interval (in milliseconds) */
var timer_intv = 3000;

Accessibility

The accessibility of this script will depend on the purpose for which it is used. This script should do nothing for browsers that do not support it. A backup server-side script could be used for the user controls. A description of the images/text after the default image may also suffice for providing the necessary information.