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.

Features

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.

Configuration

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.

• 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;

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

• define the variable DEPENDENCY_PREFIX to contain the base path of all JavaScript files as distributed.

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).
<script type="text/javascript" src="/gallery/tools/Dependencies.js"></script>
<script type="text/javascript" src="/gallery/Controller.js"></script>
• insert a <div> element at the place where the gallery should be.
<div id="galleryblock">To see pictures with the gallery component JavaScript is required.</div>
• At last, make the required JavaScript calls
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?

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.

pictureInfos.xml

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

Possible Improvements

• 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.

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.

License

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.