Displaying pictures using lightbox
Running ...


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 Vufflens


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 */
}


  • Save this file with the name lightbox.css, and upload it into your site

HTML code


  • Include the CSS with a link tag : 

<link rel="stylesheet" type="text/css"
href="http://YOURSITE/lightbox.css">

  • We need to call the lightbox.js script with this script


<script type="text/javascript"
src="http://YOURSITE/lightbox.js">
</script>

  • Calling the Lightbox with a text link



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


  • Calling the Lightbox with a picture link



<a href="URL of picture to display "
rel="lightbox"
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


The Result



Château AllamanDomaine du ManoirChâteau Maison Blanche



Lightbox2 - To Display a Set of Pictures




More Informations






One Day - One Label - One Wine