Unobtrusive Slideshows With Optional Captions

Introductory books on JavaScript no matter how old they are usually cover adding a slideshow to your web page. Of course the particular way that they show you to do it depends on how old the book is.

The slideshow script on this page is significantly different from most of those scripts because it is as completely unobtrusive as it is possible to make such a script. You can add as many slideshows as you like to the one web page and only the id where each slideshow is attached and the ids on the slideshow components (all of which use the slideshow id as a prefix) are exposed outside of the script itself.

To define each slideshow you just need to add an object to the array at the bottom of the script. Each of these objects contains four values - id, width, height, and gallery. The first of these identifies the id within the web page where the slideshow is to be attached. The second and third parameters supply the width and height in pixels for the images within the gallery (which must all be the same size for a slideshow to function correctly). The fourth parameter is an array that contains the information for the images in your gallery.

The gallery array is an array of objects rather than an array of images because this script not only displays the images but it can also display an optional caption under each image as well as optionally allowing alt text to be supplied so that the gallery can function even when your visitor can't see the images. Where alt text isn't supplied the script uses the caption as the alt text or if no caption is supplied it uses 'slideshow gallery' as the alt text. Where a caption isn't supplied the script simply leaves a blank line between the image and the Previous/Next links.

The example slideshow object looks like this:

width: 150,
height: 150,
gallery:[{img:'img0.gif',caption:'heart'}, {img:'img1.gif',caption:'Snowflake'}, {img:'img2.gif',caption:'Clover'}]

It contains the four properties id, width, height and gallery each of which has a value assigned to it (this is using the modern way of defining an object and properties). With the gallery property the value is an array of objects. Each of these objects has an img property to reference the image and optional caption and alt properties to define those values.

To add as many images as you like to a slideshow simply define an object for each within the array attached to the gallery property. To define additional galleries simply create additional objects and include them.

Some of the obsolete constructs that this script avoids using include that it does not use the images collection supported in all versions of JavaScript for HTML pages but not supported for XHTML pages. It also avoids using <a> tags that do not link anywhere for the next and previous links since a <span> tag can handle this much simpler.

Note that this script preloads the next image in the forward direction for each slideshow which hopefully will ensure that the images appear straight away as the next button is pressed without wasting time downloading all the images at the start just in case your visitors make the unthinkable decision not to view them all.



This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow