Skip to main content

JavaScript Slideshow Application

This application is based on an example given in the JavaScript Application Cookbook by Jerry Bradenbaugh, published by O'Reilly. The code is far too long to display on screen, but you can view it online. You can also download all the graphic files used by clicking the Examples / Download link at the left-hand side of the web page for the book given above. You'll find them in the folder for Chapter 3.

The application allows users to view groups of slides, in any order, or consecutively in autopilot mode according to a timed interval you choose. Each slide is a DHTML layer that contains an image and descriptive text. Your slides could conceivably contain almost any combination of text, graphics, DHTML, and the like. These slides give the user a fictitious tour of the wild animal kingdom.

The slides appear in the centre of the screen and the two graphics labelled "Automate" and "Guide" at the top left of the screen. The arrows of the "Guide" image allow the user to navigate slide by slide, forward or backward in the slideshow.

Users can also move to any slide in the show by clicking "Guide." This reveals a slide menu that automatically moves the user to the desired slide by passing the cursor over the corresponding slide name. Clicking "Guide" once again conceals the slide menu. Users can jump in almost anywhere and take advantage of the application features.

We shall describe the application code in terms of its features instead of describing the code from top to bottom. All the slides are DHTML-based entities. As far as scalability, there's no reason why you couldn't fit hundreds of slides into your online presentation. This application preloads all the images.

Save the code file as animals.html Save the images into a folder named 'images', make you sure you name them as described. The html code file should sit outside the folder.

Next: Application Variables