SVG SlideShow

I was working on a project where I needed to deal with a large amount of data. I found that graphing individual data sets using SVG worked quite well. However, opening each of the over 500 graphs individually to look for interesting characteristics became unreasonable after a short while.

That's when I got the idea for a simple SVG application that would allow me to walk through a list of images easily. It took several iterations of the code before I realized that this is just a Slide Show. The current version of the SlideShow code does not include any transitions between pictures.

The SlideShow Code and Demo

The application consists of an ECMAscript file that implements the SlideShow object, an SVG file that provides UI support for interfacing with the object, and a list of images to display. The files in this project are:

SlideShowDemo.svg: This is a demo of the SlideShow functionality. It depends on a set of images in the images subdirectory, an image list file, and the SlideShow.es code.
SlideShow.es: This ECMAscript file provides the SlideShow object functionality.
imageList.txt: This file provides a list of images to load.
loadingMsg.svg: This file an initial image that the SlideShow Demo displays while it is loading the list of images.

Hopefully the controls make sense. In order, the buttons are:

Go to the first image.
Go to the previous image.
Go to the next image.
Go to the last image.
Play all images with a 2 second delay between them.
Stop the slideshow.

Depending on the speed of your connection, it is possible that an image might not display before the SlideShow goes on to the next image. You can go to the beginning and try again and all should show.

At present, the slideshow demo does not work on FireFox. FireFox has an issue with displaying an SVG image from an SVG <image> element.