20

20Lightbox

Lightbox

Light­box is a com­mon way of over­lay­ing larger copies of an image on the web site; it’s the sort of thing that hap­pens 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 big­ger ver­sion of it; it greys out the back­ground and over­lays the larger image:

Figure 20.2 - A lightbox image
Figure 20.2   A lightbox image

This is an­other small JavaScript pro­gramme, but this time it also has some CSS files and im­ages that come with it.

The soft­ware was writ­ing by Lokesh Dhakar and can be down­loaded here. There is also a GitHub link (isn’t there al­ways).

This soft­ware is also avail­able under the MIT li­cence.

To give you fair warn­ing, I’ve fid­dled with this one a bit (I had to ad­just it to get it work­ing on the web­site), you might just want to use the ver­sion that comes with the web tem­plate, it’s al­ready 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