Sliding Gallery

This is a short documentation to the Sliding Gallery, a JavaScript-based picture gallery.
To download the gallery, choose between the version with pictures and the version without pictures (which is much smaller, but you have to provide the pictures yourself).
Follow this link to see an example of the gallery.


Sliding Thumbs

The main feature is, as the name points out, the Sliding through the thumbs. Instead of the always-the-same static tables/lists of thumbs we decided to create a sliding thumbs view. This is a great space saver and a nice feature.

Adapting size

Another nice feature is the adaptation to a changing font size. If you are used to increasing/decreasing your fonts for better reading (e.g. with firefox Ctrl+/Ctrl-) know even the pictures adapt. Usually they have fixed sizes, but as we defined their dimensions using the em CSS property, this limitation does not exist.

XML based

The intention for this gallery was to provide a better UI for a servlet backend. With the use the Javascript it is possible to display information without keeping a state at the server side. For this gallery we access an XML file on the server side which contains all required information and are from then (with exceptions of the picture loading) totally independent from the server. The only interface between this JS-Frontend end the server backend is this XML file.


At first you have to set the path definitions of the required files. Since we never know where the executing file (HTML) is located, this step cannot be generalized.

in Constants.js

Set the following parameters to point to the correct file location.

in Controller.js

The Controller is the heart of the gallery and defines all dependencies. Therefore you have to define the paths where these dependencies are defined. If you leave the files in the structure which they have originally, all you have to do is At last you have to integrate the gallery into your HTML code. Follow these steps (or have a look at the example file). Now your gallery should work. Almost, since it does not show any picture, yet, does it?

Define Images

All information about the pictures are loaded at runtime which means there is no need for you to mess with HTML or Javascript statements.


This file contains all required information about your pictures. It is a simple XML file with simple structure. Each XML element <picture> holds the following attributes with the described meaning:

Possible Improvements

If you have any further suggestions, please let me know.

Further Remarks

This gallery kind of needs more than a 7kB bandwidth, since the all thumbs have to load and each view of a picture during the slideshow as well.
What else is there to say? Well, I am not exactly a JavaScript hacker, so if you look into the code and find improvements, please let me know. The target group for this Gallery were at the time of writing only Firefox and IE6 users, so the script is only tested on IE6 and FF1.5.


Since Licensing is an important topic for all things available on the internet, it is here as well. I do not put this project under a license so feel free to do with the code whatever you like to do. But I have one limitation to it. Do not claim code from here as your own. I do not even do this, since I would not been able to do this gallery without the help of hundreds of good examples.

This document was written on August 16 2006.