The Wallaces

A WebClient JavaScript SlideShow that Supports Large Collections of Images

(posted 5/6/2004) - After a couple years of making image collections I've come up with what I think is a very good solution for displaying a large number of images organized into collections (linked as a group).

It all fits onto One Screen with intuitive controls. Take a look at an example by clicking on this page's Media Library tab and then clicking on any one of the links under the right-column Slide-Shows heading.

Got hundreds of images on your server, grouped in directories, containing filenames like picXX.jpg, or vacXX.jpg? Sure you do, if you've been taking lots of pictures on birthdays, graduations, trips, etc.

The problem has always been, how do you present all these images so that they are easily viewed, and easily organized? I've found one answer -- which is a client-side JavaScript I wrote that allows a webuser to select from a 'collection' (a link) that starts a slide show immediately after the first slide loads, and then repeats displaying all the images in that collection until the user selects another link.

This is entirely client-side coding, so you can grab the source from my web page and then paste together your own version. 99% of the source is universal -- you just plug in the names of each collection PREFIX (path to your files and the common part of each file name), and the number of slides in the collection.

The key requirement is that ALL the files in a given collection (often in a separate directory on the server) must have the same prefix, e.g. pic, or slide, or vacation, followed by a number 01,...09,10,...XX.jpg. Yes, the SlideShow is coded to assume the extension .jpg -- if you've got other formats feel free to modify the JavaScript to support them.

My implementation is linked from this webpage's Media Library tab. View the web-page source (and the supporting css) on that page to see how you can create your own instance (quick locate with find string= middle). Adding photos is just as easy as adding another collection link.

There are lots of JavaScript slideshow scripts floating about. The key features I implemented were:

• Define a slide show collection with onClick event from a link.
• Preload the next slide, while displaying the current slide. Allows for really big slide collections without waiting for ALL slides to preload before viewing anything.
• Once all slides have downloaded, a flag indicates that no more downloading is to be done for that collection -- the browser cache provides images on subsequent cycles.
• User can interrupt a collection slideshow, by clicking on the slide image -- and a popup window shows the full size version of the image. Close the window, and click on the slideshow image again to continue.

I've verified this on Opera, Netscape, and IE versions 4,5,6,7. The HTML is 4.0 Strict compliant. Hope you find this useful.