Webwork
/
Lightbox

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:

lightbox-download

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:

Head:
<script src="js/jquery-1.7.2.min.js"></script>
<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":

Body:
<a href="images/off-to-work-onion.png" rel="lightbox" title="">Mila and Justin</a>
Web page:


Single Image Display without Caption

Head:
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
Body:
<a href="images/larry.jpg" rel="lightbox" ><img src="images/larry-thumb.jpg" width="106" height="127" alt="Larry" /></a>

<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>
Web page:
larry-thumb moe-thumb curly-thumb


Image Group Display with Captions

To group images and make next/previous arrows appear, add [groupname] to the link in square brackets.

Head:
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
Body:
<a href="images/wolfman.jpg" rel="lightbox[monsters]" title="The Wolfman"><img src="images/wolfman-thumb.jpg" width="150" height="150" alt="wolfman-thumb" /></a>

<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>
Web page:
wolfman-thumb dracula-thumb mummy-thumb bride-thumb frankenstein-thumb

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:

Color of frame around image:
/* line 30, ../sass/lightbox.sass */
.lb-outerContainer {
background-color: #111;
Width of frame around image:
/* line 39, ../sass/lightbox.sass */
.lb-container {
padding: 30px;
Color of background overlay (default = black):
/* line 6, ../sass/lightbox.sass */
#lightboxOverlay {
background-color: #000;
Opacity of background overlay (default = 85):
/* line 6, ../sass/lightbox.sass */
#lightboxOverlay {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
opacity: 0.85;
Previous | Webwork Table of Contents | Next >
photographs:

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma