Slideshow - an example of a maintainable, unobtrusive JavaScript solution

Step 1: Analizing the problem

The first step to a good script is to analyze what you want to achieve: We want to create a slide show of photos and we want to keep maintenance easy.

How to create a slide show

There are several ways to have a slideshow in a web site:

Include all images in the document.
- This is the safest option, as it will work without JavaScript, and all the images will be loaded when the page has loaded. However, it is only applicable for a small amount of pictures.
Include the first image in the document and have a server-side script create the slideshow functionality.
- This is also pretty safe, but can be very annoying for the end user - I don't want to load the whole page to only get to the next photo. Good for page impressions and clickthrough advertising, though, which is why a lot of news sites use this method.
Include the first image in the document and load the others on demand.
- This can be annoying as you are dependent on JavaScript and you have to maintain the photo list in a JavaScript array. You also have to provide a loading indicator to show the user that something is happening.

In our case, we take the following list of images and turn it into a slideshow with previous and next buttons and an indicator telling us which photo of how many is currently displayed.

<ul id="slideshow">
  <li><img src="img/flat1.jpg" alt="Hallway" /></li>
  <li><img src="img/flat2.jpg" alt="Hob" /></li>
  <li><img src="img/flat3.jpg" alt="Bathroom" /></li>
  <li><img src="img/flat4.jpg" alt="Living Room" /></li>
  <li><img src="img/flat5.jpg" alt="Bedroom" /></li>
</ul>

The final output can look something like the slideshow on the right.

Depencies check

We have several elements here that rely on JavaScript to work: The text indicator and the next and previous links. In order to keep our solution accessible we need to make sure about several things:

These elements should only appear when JavaScript is available - users trust us to give them what they can use. A link that doesn't do anything violates that trust in us.
The interactive elements should be usable regardless of input device - let's not rely on the user to have a mouse.
The images should not be hidden unless the user can access them again. Technically only showing the first image and no previous and next links is degrading gracefully, but why should the user have to download all images just to see the first one?