Image Gallery

Often, you want to display a set of pictures and allow the user to choose which ones to look at more closely, something like an art gallery. Therefore, we'll call this JavaScript application a gallery. We'll have an arrangement of small pictures, often called thumbnails, and, if the user clicks on any one of them, a larger version is displayed.

Note that one advantage of a gallery is that a set of thumbnails can load quicker than even one of the larger versions, if the file-sizes are much smaller. Therefore, you should go to the extra effort to make thumbnail-size images, using an image editor (like PhotoShop or Pixlr or the Gimp), rathern than just using the width and height attributes to make the squeeze the big files down to a small screen area.

This will just be a small gallery, with just four pictures. In this version of the gallery application, we'll allocate space on the page for the larger version. In this example, we'll put a boring pale-yellow image there. In your application, you could choose one of the large images, either randomly or deterministically, or something else entirely.

filler image
A pale yellow image filler image

An alternative is to have the large image take over the window, putting everything else behind a semi-transparent dim filter, so that the user's attention is necessarily on the large image. This is called a Lightbox, and has been implemented many times since its originator, Lokesh Dhakar. We've implemented a very simple version of it; there are many more sophisticated ones. The lightbox, of course, requires an additional bit of coding to make the image go away so that the user can look at another image or do anything else.

How It's done

Use view source on this page to see exactly how we did it.

There's more in the reading on galleries and drop-downs