A common fixture on websites is some sort of photo album or slide show. There are many sites that provide commercial photo sharing services, but sometimes you want to share photos on your own pages with your own look and feel. One of the problems with photos is that if you have a lot of photos they can take a long time to load and people don't necessarily want to wait to see them. If you have a lot of photos, any given user may not wish to see all of them – or at least not wait a long time to see unknown images that may or may not interest them. A common solution is to build some sort of slide show or otherwise create a photo album where users initially see thumbnails and then are able to choose to see one or more images of their choice, or even all of them in order. Currently, Adobe Flash is a popular choice for such albums. Flash makes it easy to make very nice albums, but you have to own the software to build them and if the people looking at your website don't have Flash Player, rather than seeing your pictures they see a notice that they need to download Flash Player. Another option is to use JavaScript. This doesn't require any software on your end, and if your viewers don't have JavaScript available, they can still see the thumbnails and one large image of your choice.

A basic quick and dirty JavaScript photo album is very simple. It requires only creating HTML that displays your thumbnails and one larger image. To get your photo album working, you put an id attribute on the large image element so that you can use JavaScript to select it. Then you add an onClick attribute to each of your thumbnail images, to change the source of the large image to the full size version associated with that thumbnail.


<img src="simone_thumb.jpg" onClick='document.getElementById("largeImage").src="
simone.jpg"'/>
<img src="julie_thumb.jpg" onClick='document.getElementById("largeImage").src="j
ulie.jpg"/'>
<img id="largeImage" src="simone.jpg" width="544" height="408"
align="top" border="2"/>


You can view a working sample of this code here. For the code sample, I added the small refinement of using the script tag to print out the directions to click on a thumbnail to see the larger image and using the noscript tag to tell viewers how JavaScript is used on the page. There are many further refinements that could be added to make the page easier to setup and provide a better user experience.