Lightbox
Lightbox is a simple and elegant jQuery method for displaying images in modal dialog popups that float over the Web page. It is very easy to install and use, is customizable and has been very widely adopted for presenting content ranging from fine art prints to e-commerce product catalogs.
Since Lightbox is an open-source project, it has had many contributors/refiners and is constantly evolving. Several versions are available under names like Thickbox, Slimbox, Fancybox, Leightbox, etc.
Here, we'll be referencing the original Lightbox as developed by Lokesh Dhakar and now called Lightbox 2. For full documentation, go here.
Installing Lightbox
To install Lightbox, first download the files here. This will give you a zip file containing three folders:
Put the three folders in the same place as the index.html file that will launch your Lightbox gallery and use this code in the head of your doc to point to them:
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
Then, from whatever link you want to use to trigger the Lightbox gallery, add rel="lightbox":
Single Image Display without Caption
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
<a href="images/moe.jpg" rel="lightbox" ><img src="images/moe-thumb.jpg" width="106" height="127" alt="Moe" /></a>
<a href="images/curly.jpg" rel="lightbox" ><img src="images/curly-thumb.jpg" width="106" height="127" alt="Curly" /></a>
Image Group Display with Captions
To group images and make next/previous arrows appear, add [groupname] to the link in square brackets.
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
<a href="images/dracula.jpg" rel="lightbox[monsters]" title="Dracula"><img src="images/dracula-thumb.jpg" width="150" height="150" alt="dracula-thumb" /></a>
<a href="images/mummy.jpg" rel="lightbox[monsters]" title="The Mummy"><img src="images/mummy-thumb.jpg" width="150" height="150" alt="mummy-thumb" /></a>
<a href="images/bride.jpg" rel="lightbox[monsters]" title="The Bride of Frankenstein"><img src="images/bride-thumb.jpg" width="150" height="150" alt="bride-thumb" /></a>
<a href="images/frankenstein.jpg" rel="lightbox[monsters]" title="Frankenstein's Monster"><img src="images/frankenstein-thumb.jpg" width="150" height="150" alt="frankenstein-thumb" /></a>
Customizing Lightbox
If you feel like experimenting, you can go into the css/lightbox.css file and change the popup style. Be careful, though, much of the code is written to make Lightbox cross-browser compatible and it is easy to break things - always save a backup copy first in case something goes wrong.
Three Lightbox parameters that you can change with CSS are:
.lb-outerContainer {
background-color: #111;
.lb-container {
padding: 30px;
#lightboxOverlay {
background-color: #000;
#lightboxOverlay {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
opacity: 0.85;
