Loading images using Lightbox

In Ajax, Lightbox is a very useful concept, where the content of a link that is clicked, or an image, or video is loaded in a container window without taking the user to a separate page. Lightbox also turns a set of images found on the page into a slideshow in the container window. The original Lightbox script was written in the Prototype framework. In jQuery, there are lots of implementations available. However, the ColorBox plugin takes a lead with a better user interface and features. In this recipe, we'll see how to use the ColorBox plugin to improve Lightbox.

Note

The Lightbox concept was introduced by Lokesh Dhakar. More details on this can be found on his website at http://www.lokeshdhakar.com/projects/lightbox2/.

Getting ready

We'll require the ColorBox jQuery plugin from http://colorpowered.com/colorbox/ along with the jQuery core library.

How to do it...

ColorBox HTML markup is merely a list of image links. We have listed the image links through an unordered...