Using a Lightbox to display your Pictures

The Lightbox JS Project

From the page of the author : Lokesh Dhakar : Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers
Places images above your current page, not within
Try this example, display the picture above this page :

Château de Vufflens - Swiss Wineries

The JS Script

Download the lightbox.js script.
Change the value of 2 variables, at the beginning of script
loadingImage is the animation to display when the pictures are loading
closeButton is the small cross placed in top-right corner of the picture
loading.gif and close.gif can be downloaded from the lightbox site, and uploaded into your site

var loadingImage = 'http://YOURSITE/loading.gif';

var closeButton = 'http://YOURSITE/close.gif';

Now with these changes, save the script and upload it into your site

The Image Container

We use CSS to style the image container

To create the shadow effect over the page, we need to use a PNG file, and some extra CSS to support transparency under IE
overlay.png can be downloaded from the lightbox site, and uploaded into your site
I use this CSS, of course, we must define the path for the overlay id

#lightbox
{
border-right: #666 2px solid;
padding: 10px;
border-bottom: #666 2px solid;
background-color: #eee;
}

#lightboxDetails
{
font-size: 0.8em;
padding-top: 0.4em;
}

#lightboxCaption
{
float: left;
}

#keyboardMsg
{
float: right;
}

#closeButton
{
right: 5px;
top: 5px;
}

#lightbox img
{
clear: both;
border: medium none;
}

#overlay img
{
border: medium none;
}

#overlay
{
background-image: url(http://YOURSITE/overlay.png)
}

The picture is within a container. We can change the style of this block :

#lightbox /*style of container */
{
border-right: #666 2px solid; /* border of container */
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
padding-top: 10px;
border-bottom: #666 2px solid;
background-color: #eee; /* background of container */
}