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


lightbox2


  • 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




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


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

<script type="text/javascript"
src="http://YOURSITE/scriptaculous.js?load=effects,builder">
</script>

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


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 : 

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



  • Calling the Lightbox2 with a text link



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


  • Calling the Lightbox2 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



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



Château AllamanDomaine du ManoirChâteau Maison Blanche



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


More Informations





One Day - One Label - One Wine