Lightbox is a common way of overlaying larger copies of an image on the web site; it’s the sort of thing that happens on eBay when you click an image.

Figure 20.1 - An image on a website
Figure 20.1   An image on a website

If you click the image, you get a bigger version of it; it greys out the background and overlays the larger image:

Figure 20.2 - A lightbox image
Figure 20.2   A lightbox image

This is another small JavaScript programme, but this time it also has some CSS files and images that come with it.

The software was writing by Lokesh Dhakar and can be downloaded here. There is also a GitHub link (isn’t there always).

This software is also available under the MIT licence.

To give you fair warning, I’ve fiddled with this one a bit (I had to adjust it to get it working on the website), you might just want to use the version that comes with the web template, it’s already got the mods in it.

  • Lightbox uses jQuery as well as JavaScript; the jQuery library must be loaded before Lightbox will work.

End flourish image