This is a short documentation to the Sliding Gallery
To download the gallery, choose between the version with pictures
version without pictures
(which is much smaller, but you have to provide the
Follow this link to see an example of the gallery
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
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.
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.
Set the following parameters to point to the correct file location.
this.FILE_PICTUREINFO to the XML file containing all picture information
this.FILE_PREFIX path to the path where the gallery scripts and files are located;
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
- define the variable
At last you have to integrate the gallery into your HTML code. Follow these steps (or have a look at the example file).
- Add these two lines to the head element of your website
(do not forget to change the path here to the actual path of your installation).
- insert a <div> element at the place where the gallery should be.
var gallery = new NS.Gallery.Controller('gallery'); gallery.render('galleryblock');
Now your gallery should work. Almost, since it does not show any picture, yet, does it?
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:
id unique identifier for this picture
thumb path to a thumbnail version of the picture
viewer path to a normal-sized viewer version of the picture
full path to full-sized version of the picture
comment comments to the picture
- fix buggy IE6 slider styles
- implement graphical countdown for the slideshow
- wait with slideshow until the next picture is loaded (for small bandwidths :)
- display some 'image is loading' message while picture is not loaded
- react to keypress (e.g. Cursor Left)
If you have any further suggestions, please let me know.
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.
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.