Liens du Vin - Lightbox2 To Display a Set of Pictures

lightbox2

Implementing lightbox (version 1) to display picture above a page is easy

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

Javascript

Lightbox 2 (version 2.04) uses the Prototype Framework and Scriptaculous Effects and Builder Libraries
Upload into your site, the three files : prototype.js, scriptaculous.js, effects.js and builder.js
Change lightbox.js to define the path for two pictures : loading.gifand closelabel.gif

fileLoadingImage:
'http://YOURSITE/loading.gif',

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) :

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 :

#outerImageContainer
{
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 :

#imageDataContainer
{
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 :

Calling the Lightbox2 with a text link

Calling the Lightbox2 with a picture link

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"
rel="lightbox[name_of_set]"
title="title for pic 1>links</a>

<a href="URL of big picture-2"
rel="lightbox[name_of_set]"
title="title for pic 2>links</a>

<a href="URL of big picture-3"
rel="lightbox[name_of_set]"
title="title for pic 3>links</a>

The Result

Limitations

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