We recently built a sliding image gallery for The Library. The technique is very simple in its most basic form, but can get exponentially more complicated as you add extra functionality. I’m not going to go into any of the complications, though. Today, just the basic concept.

The sliding image gallery is used to display a large number of items in a very small space, and it works by showing one item (or a small sample) at a time, and allows the user to view all the other items using left and right (or up and down) buttons to step through the collection. They are often animated, producing a sliding effect as the gallery moves one image out and the next one in.

We have built lots of these galleries in the last few years, and they seem to come in a whole range of shapes, sizes and purposes. We initially created a gallery which displayed 4 images at a time, and looked like a strip across a page. We have since created them for one, two, three or four images, both vertically and horizontally, either as stand-alone entities, or attached to a larger image, as a set of thumbnails. The images are sometimes displayed alone, while others include titles, captions and other information. All based on the same basic concept, with a few tweaks and additions.

The concept is very simple. You need just three elements to your gallery: the window, the belt and the navigation buttons. Oh, and the images, of course. In the explanation below I’m going to describe a gallery that slides horizontally, but the concepts work roughly the same for vertical galleries – just read height for width.

The window

The window is the containing element for the gallery. It is the view port through which the images show. The window must specify its width at least, and set its overflow style to ‘hidden’. It is usually a good idea to specify the height as well, but if you have variable items (eg: your images have captions of variable length), you can leave this off. The window must be positioned ‘relative’.

The belt

The belt is a containing element for all the images. The belt element must be added as a child to the window, but its size is not set. The belt must be positioned ‘absolute’. Items are added to the belt as needed, and the belt grows to accommodate them. The sliding effect comes from moving the belt left and right by setting the ‘left’ CSS style attribute of the belt.

The items

Each item added to the belt should be contained in a SPAN element, and have its ‘display’ style set to ‘inline-block’ (The element must be a span because IE7 won’t recognise the ‘inline-block’ display style for DIV elements). This allows the items to be stacked horizontally without having to float them, and this in turn allows us to measure the width of the belt easily. The image (and title, caption or anything else) is added to the containing element.

Note: for vertical galleries, use a DIV without the ‘inline-block’ display style to stack the items one above the other

The navigation buttons

These are placed outside of the window, and are usually placed on the ends of the slider, although they can, technically, be placed anywhere at all. The code that responds to the buttons’ clicks is where all the hard work is actually done. It is a good idea to prepare your script so you know exactly how big each step is going to be before the button is clicked, so that minimum processing is required, especially if you’re intending to animate the slide.

Essentially the idea is very simple. When the gallery is first displayed, the belt is displayed at its very furthest left (left=0px). To move an image into the view window, simply set the belt’s left style attribute to the offsetLeft attribute of the item container for that image.

Complications

There are a number of issues you’ll have to deal with while setting up your gallery, depending on your implementation. For example, you will need to provide logic to prevent the user from moving the belt further than it can go, or to make the belt continuous (ie: right of the rightmost item is the leftmost item, and vice versa). If you decide to show more than one image in the window at a time, you will need to decide how far each step will go, and how to handle uneven numbers of items. You will even need to decide whether clicking the right button should move the belt right, or bring in the image that is to the right (which moves the belt left).