How to display a set of pictures using Lightbox2
Running ...


  • The version 1 use a small javascript to create the lightbox effect.
  • With version 2, we must use a heavier javascript (more then 50K) to use AJAX and graphical effects
  • We can now display a set of pictures and make more visual effects
  • Download the zip file, containing all the files needed from Lokesh Dhakar site



fileBottomNavCloseImage: 'http://YOURSITE/closelabel.gif',

  • Save the script and upload it into your site
  • Upload all the pictures (blank, closelabel, loading, nextlabel, prevlabel)
  • Include these three Javascript files in your page (in this order) : 

<script type="text/javascript"

<script type="text/javascript"

<script type="text/javascript"

Style Sheet

  • Change lightbox.css, to define the path for two pictures : prevlabel.gif and nextlabel.gif
  • Add text-decoration: none to not have dotted line when the mouse is hover these links

#prevLink:hover, #prevLink:visited:hover
background: url(http://YOURSITE/prevlabel.gif) left 15% no-repeat;
text-decoration: none;

#nextLink:hover, #nextLink:visited:hover
background: url(http://YOURSITE/nextlabel.gif) right 15% no-repeat;
text-decoration: none;

  • Depending the style of the page, we can add this CSS, to change background of close link

/* change bottomNavClose */

#bottomNavClose:hover, #bottomNavClose:visited:hover
background: none;
text-decoration: none;
border: 0 none;

  • We can change the style of the container which encapsulate the picture :

position: relative;
background-color: #fff; /* color of border */
width: 250px; /* initial size of container */
height: 250px;
margin: 0 auto;

  • Same, we can define the style of the bottom part, containing the caption :

font: 10px Verdana, Helvetica, sans-serif; /* text bottom part */
background-color: yellow; /* color bottom part */
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%

  • Save the CSS and upload it into your site

HTML code

  • Include the CSS with a link tag : 

<link rel="stylesheet" type="text/css"

  • Calling the Lightbox2 with a text link

<a href="URL of picture to display "
title="title">Text Link</a>

  • Calling the Lightbox2 with a picture link

<a href="URL of picture to display "
title="title"><img src="URL of small picture" alt="..." title="..."></a>

  • We just use rel="lightbox" to tell the navigator we use the lightbox to display the target of link

A set of pictures

  • We can display a set of picture, using [name_of_set] to group the pictures :

<a href="URL of big picture-1"
title="title for pic 1>links</a>

<a href="URL of big picture-2"
title="title for pic 2>links</a>

<a href="URL of big picture-3"
title="title for pic 3>links</a>

The Result

Château AllamanDomaine du ManoirChâteau Maison Blanche


  • We have to wait the page is ready, before to click the picture and to have the lightbox effect
  • There is a clone of lightbox, slimbox, which does not have this limitation

More Informations

One Day - One Label - One Wine