Simple unobtrusive Javascript Gallery/Slide show

A simple slideshow/gallery. It collects all the images in an element and turns them into a nice little slideshow with some added usability features.

Features

Unobtrusive: no complicated HTML needed, and it degrades perfectly to the basic HTML.
Simple: no bells, whistles and certainly no assumptions about styling or image sizes.
Usable: returns focus to the clicked link to make keyboard users happy - just keep pressing enter.
Intuitive: loops the loop - why stop the fun when you get to the end?
Customisable: optional title display taken from the title attribute of the image being displayed.
More Usable: link to a specific image useing standard page anchors .
Cross browser: So simple it works with all modern browsers and most old ones.
Degrades nicely: Images are accessible without JavaScript.
Light: only four kilobytes all in (uncompressed with comments).

Content before.

Content after.

So how does it all work then?

Manipulating the DOM using JavaScript is a often about extracting information from the HTML, processing it and then presenting it back to the user in a different way. This is exactly what I'm doing here.

But what information have I got to work with in the first place? The raw HTML is:

<ul id="jsGalleryList" >
    <li><img src="images/1.gif" alt="alt_1" title="title_1" ></li>
    <li><img src="images/2.gif" alt="alt_2" title="title_2" ></li>
    <li><img src="images/3.gif" alt="alt_3" title="title_3" ></li>
    ...
    <li><img src="images/8.gif" alt="alt_8" title="title_8" ></li>
</ul>

We use the id attribute of the parent element to target the selection of image that we are going to use for the gallery. The specific HTML markup of the element that is holding the images is irrelevant; the script just gets all the images from within the element. This leaves us with the information contained with in the <img> tags:

The alt and src atributes we can leave alone, these will work the same for the images with or without the gallery script.
The title attribute can be used in three ways: first to title create a display title for the image currently being displayed, and secondly to let the user know the title of the image that will be displayed when they click on the forward or back links (by setting the title tag on the <a> tags). Finally I use the title attribute to allow the specific images to be linked to—when the page loads the script tests the url to see if there is a page anchor that matches on of the image's titles, if this is the case then the it will start on that image.

There are two more bits of information that are needed: the position of the gallery in the document and the order of the images. Once we have all this information we can choose to create HTML and insert it into the DOM pretty much anyway we like. The final HTML for the manipulated gallery in this case is:

<div id="gDisplay">
    <h2>title_2</h2>
    <img src="images/2.gif" alt="alt_2" title="title_2">
    <a title="Show image: title_1" href="#title_1" id="backLink">Previous image</a>
    <a title="Show image: title_3" href="#title_3" id="nextLink">Next image</a>
</div>

The intention is to reformat the HTML in as simple a way as possible but to expose the maximum amount of information about the image and the functionality of the gallery.