Adding image enlargement with Lightbox 2

Lightbox 2 is a very popular script based on script.aculo.us (and in turn, based on Prototype) which provides a slick way to open links to high-resolution versions of thumbnail images in a modal window.

In this recipe, we will integrate Lightbox 2 into our page, and add an image thumbnail to which we will apply the Lightbox 2 functionality.

Getting ready

First, we need to obtain a copy of Lightbox 2, by visiting http://www.huddletogether.com/projects/lightbox2/, and navigating to the download section. Download the ZIP file of the latest version, and unpack it to the cook subdirectory of the Moodle installation used in this example, that is, /path/to/moodle/cook/lightbox2.

Note

Lightbox 2 contains links to images that are relative to the page on which you have loaded the script. To ensure that these images are available to the script, copy the images folder to the same location as your script, in our example, /path/to/moodle/cook/images.

How to do it...