O'Reilly logo

CSS Cookbook, 3rd Edition by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Adding a Lightbox

Problem

You want to overlay images on top of a current web page (as shown in Figure 5-17) without popping a new browser window.

Solution

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

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

<title>Mr. McCool's Homepage</title>
<!-- Structure for Lightbox effect -->
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects"></script>
<!-- Script for Lightbox -->
<script type="text/javascript" src="lightbox.js"></script>
The default page

Figure 5-17. The default page

Next, link to the stylesheet that renders the look and feel of the overlay effect:

<title>Mr. McCool's Homepage</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required