Multiple Slideshows with Captions
1. Introduction and Example
Basic Help
More of this Feature
Adding a slideshow to your web page is something that books on JavaScript have shown you how to do since JavaScript was first created. The code that most of those books show you though is very limited and needs to be modified significantly if it is to be incorporated into pages where there are other scripts in use.
The slideshow script that the examples on this page use is significantly different from most of those scripts. The code for this script is somewhat longer than most of those other slideshow gallery scripts but this one can be used in any web page without any possibility of its clashing with another script in the page. The same script can even be used to display two or even more slideshows on the same web page using a single copy of the script.
Another way in which this script is different is that it is completely unobtrusive (as all JavaScript these days should be) and only needs a div tag in the page with a recognisable id in order for it to know where to display the slideshow. You just need to supply four values when creating a slideshow object in JavaScript for it to set up everything necessary to display the slideshow in that div. The first parameter is the id of the div, the second and third are the width and height of the images that you are displaying, and the fourth is an array that contains the information for the images in your gallery.
The array is an array of objects rather than an array of images because this script not only displays the images but it displays a caption under each image as well. We'll look at a couple of different ways you can define the array when we look at how to add the script to your page.
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.
If you want to add image slideshows like this to your site then the first thing you need to do is to obtain the script.
