Multiple Slideshows with Captions
3. Defining Slideshows
More of this Feature
The final step in adding our slideshows to the web page is to define each slideshow. The JavaScript for this is saved as a separate file with the name that you gave in that extra script tag (slide1 in my example).
Each slideshow is defined by creating a new slideshow object like this:
The first three of the parameters are fairly straightforward. The first is the id where you want the slideshow to appear, the second is the width of the images and the third is the height of the images (all the images in a slideshow MUST be the same size). The fourth parameter is an array of the entries in our slideshow.
The gallery array is slightly more complicated than a regular array because each array element is an object with two properties - the filename of the image to be displayed and the text that is to appear as the caption. We can use a JavaScript shourtcut notation to define a single object in the array like this:
Each object is surrounded in {} and has img: followed by the image filename and caption: followed by the caption text. They are separated by a comma. The order doesn't matter and so the same object can be defined if you prefer using:
There are two ways that we can build the array of these objects. The first way is to first create the array and then push the objects into it like this:
gallery.push({img:'graphics\/pic1a.gif', caption:'image one'});
gallery.push({img:'graphics\/pic2a.gif', caption:'second image'});
gallery.push({img:'graphics\/pic3a.gif',
caption:'image the third'});
The second way is to use [] to define the array like this:
{img:'image\/img1.gif',caption:'Snowflake'},
{img:'image\/img2.gif',caption:'Clover'}];
The only other thing we need to do is to make sure that the slideshow object isn't called until the div tag it is going to load into has loaded into the page. The easiest way to do this is to attach it th the window.onload event like this:
var shw = new SlideShow('slide',width,height,gallery);
};
Alternatively you could use my faster dom script to load the slideshow sooner.
Just in case it isn't clear from the above instructions how to put the pieces together to make your slideshow, heres the code to build the first of the two slideshows from the introduction page.
var SSheight = 150;
var SSgallery = new Array();
SSgallery.push({img:'graphics\/pic1a.gif', caption:'image one'});
SSgallery.push({img:'graphics\/pic2a.gif',
caption:'second image'});
SSgallery.push({img:'graphics\/pic3a.gif',
caption:'image the third'});
// definition of width, height
// and gallery for additional slideshows here
function start() {
var shw = new SlideShow('slide',SSwidth,SSheight,SSgallery);
// additional new SlideShow statements here
}
window.onload = start;
Just add the code for the extra slideshows in the spots marked with the comments making sure to give each width, height, and gallery array a different name.
