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 >
Re-Vision.com

projects:
Simple Truths (and Complex Lies)

The Built World
Semblance Portrait Project
Back to Square One
Changing Chicago
Chicago's Reliance Building
US
Along the Mississippi River
The Work of Antoni Gaudí
Graffiti

places:
Morocco 2023
Beecher, Illinois
Iceland 2017
Cuba 2015
Providence, Rhode Island
Greece 2013
Eastern Europe 2013
Israel 2010
Paris, France
Puebla, Mexico 2009
Puerto Rico 2009
Barcelona 2007
Rome, Italy 2006

archive:
Graphics, sounds, and other ancient
items from the dawn of the Web.


FWIW:
Biography

©
Jay Boersma