Recipe 4.6. Adding a Lightbox

Problem

You want to overlay images on top of a current web page (see Figure 4-16) without popping a new browser window.

Figure 4-16. The default page

Solution

Download the source code the lightbox effect from http://www.huddletogether.com/projects/lightbox2/#download.

Along with the Prototype Framework and Scriptaculous Effects JavaScript libraries, include a specialized JavaScript for overlaying images:

<title>Mr. McCool's Homepage</title> <!-- Structure for Lightbox effect --> <script type="text/javascript" src="/books/3/27/1/html/2/prototype.js"></script> <script type="text/javascript" src="/books/3/27/1/html/2/scriptaculous.js?load=effects"></script> <!-- Script for Lightbox --> <script type="text/javascript" src="/books/3/27/1/html/2/lightbox.js"></script>

Next, link to style sheet that renders the look-and-feel of the overlay effect:

<title>Mr. McCool's Homepage</title> <script type="text/javascript" src="/books/3/27/1/html/2/prototype.js"></script> <script type="text/javascript" src="/books/3/27/1/html/2/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="/books/3/27/1/html/2/lightbox.js"></script> <link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />

Within the web page content, include a link to an image making sure to include a rel attribute with a value of lightbox. A common link example would be to wrap a link around a thumbnail image:

<a href="trammell_shoes.jpg" rel="lightbox" title="Trammell shows off  his happy shoes."><img src="/books/3/27/1/html/2/trammell_shoes_tn.jpg" alt="Mark Trammel  is happy with his shoes." /></a>

Clicking on the link activates the lightbox effect, as shown in Figure 4-17.

Figure 4-17. The lightbox appears on top of the page

Discussion

The lightbox effect is built on two core pieces: the Prototype JavaScript Framework and Scriptaculous.

Prototype creates a more object-oriented framework that allows developers to quickly build web-based applications based on JavaScript. For more information about Prototype, see the official site http://prototype.conio.net/.

Scriptaculous is a collection of JavaScript libraries. When used in conjunction of Prototype, Scriptaculous allows developers to build dynamic, Asynchronous JavaScript + XML (Ajax) interactions. For further information on Scriptaculous, see http://script.aculo.us/.

With the JavaScript foundations in place, web developer Lokesh Dhakar (see http://www.huddletogether.com/) developed a clever image viewer that displays a full-size image without having to leave the web page that displays the thumbnails.

Setting up the files

When you download and link the JavaScript files and a style sheet to a web page, make sure the files are properly linked. For example, if you place JavaScript and a style sheet in a separate folder locations, make sure the code reflect their locations:

<script type="text/javascript" src="/_assets/js/prototype.js"></script> <script type="text/javascript" src="/_assets/js/scriptaculous.js?load=effects"> </script> <script type="text/javascript" src="/_assets/js/lightbox.js"></script> <link rel="stylesheet" href="/_assets/css/lightbox.css" type="text/css" media="screen" />

In the lightbox JavaScript file, also make sure the locations of the images are correct. If you need to edit the location of the images, look towards the top of the JavaScript file for the following lines to modify:

var fileLoadingImage = "/_assets/img/loading.gif";         var fileBottomNavCloseImage = "/_assets/img/closelabel.gif";

The style sheet for the lightbox utilizes the background image property three times. Make sure those images referenced in the properties are also set to the correct locations:

#prevLink, #nextLink {  width: 49%;  height: 100%; /* Trick IE into showing hover */  background: transparent url(/_assets/img/blank.gif) no-repeat;   display: block; } #prevLink:hover, #prevLink:visited:hover {   background: url(/_assets/img/prevlabel.gif) left 15% no-repeat;  } #nextLink:hover, #nextLink:visited:hover {   background: url(/_assets/img/nextlabel.gif) right 15% no-repeat; }

Making a slideshow

In addition to showcasing one image at a time, the lightbox can be set up to display a slideshow like the one in Figure 4-18.

Figure 4-18. The lightbox can display a slideshow of images

In order to achieve this affect, modify the value of the rel element by using right-angle brackets after lightbox and inserting a gallery name. In the code example, I used the gallery name austin as I took the pictures in Austin, TX:

<ul>  <li><a href="trammell_shoes.jpg" rel="lightbox[austin]"  title="Trammell shows off his happy shoes."><img src="/books/3/27/1/html/2/trammell_shoes_tn.jpg"  alt="Mark Trammel is happy with his shoes." /></a></li>  <li><a href="molly_andy.jpg" rel="lightbox[austin]" title="Molly and  Andy pose for a shot."><img src="/books/3/27/1/html/2/molly_andy_tn.jpg" alt="Molly and Andy  pose for a shot." /></a></li>  <li><a href="msjen.jpg" rel="lightbox[austin]" title="Ms. Jen at  breakfast."><img src="/books/3/27/1/html/2/msjen_tn.jpg" alt="Ms. Jen at breakfast." /></a></li> </ul>

The gallery name needs to be the same in order for related images to be put into the same slideshow presentation.

Known browser issues

Since the lightbox effect is built on Prototype framework, the lightbox effect's support in browser is based on how many browsers Prototype supports. As of this writing the following browsers support Prototype:

Microsoft Internet Explorer for Windows 6+
Mozilla Firefox 1.0+
Mozilla 1.7+
Apple Safari 1.2+

The lightbox effect degrades gracefully. If a visitor's browser does not support the lightbox effect, the browser will follow the value of the HRef attribute.

<a href="trammell_shoes.jpg" rel="lightbox" title="Trammell shows off  his happy shoes."><img src="/books/3/27/1/html/2/trammell_shoes_tn.jpg" alt="Mark Trammel  is happy with his shoes." /></a>

In this example, the browser pulls up the file trammel_shoes.jpg.