Lightbox is a free open-source JavaScript library that you can use to
present an image gallery on your webpage in a visually appealing way.
When a user clicks on one of your thumbnail images, Lightbox will fade
out the page background and zoom the image to fill the browser window.
The creator of Lightbox has made it possible to add this functionality
to your website with only a few minor modifications to your HTML code.
Javascript Lightbox
Lightbox is a free open-source JavaScript library that you can use to
present an image gallery on your webpage in a visually appealing way.
When a user clicks on one of your thumbnail images, Lightbox will fade
out the page background and zoom the image to fill the browser window.
The creator of Lightbox has made it possible to add this functionality
to your website with only a few minor modifications to your HTML code.
Instructions
Things You'll Need:
-
Web browser
-
HTML page(s)
-
Images
-
Step 1
Open your web browser and go to the Lightbox home page (see Resources). Download the latest version of the library.
-
Step 2
Extract
the ZIP file that you have downloaded. It contains a sample HTML file
and three folders: "css," which contains stylesheets used by Lightbox;
"images," which contains images used by the library; and "js," which
contains the Lightbox source code as well as the Prototype and
Scriptaculous libraries that are required by Lightbox.
-
Step 3
Copy
the "css," "images" and "js" folders to a location that is accessible
from your webpage. The remaining steps will assume that you have placed
them in the same directory as your HTML file; if you put them in a
different location, you will need to adjust the paths in these steps
accordingly.
-
Step 4
Open the HTML file that will use Lightbox in your preferred text editor.
-
Step 5
If
you are not already using the Prototype and Scriptaculous libraries on
your webpage, add the following two lines in the "<head>" section
of the HTML file:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
You can skip this step if you are already using Prototype and Scriptaculous.
-
Step 6
Add the following two lines in the "<head>" section after the lines that load Prototype and Scriptaculous:
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
-
Step 7
Add
the Lightbox effect to any image links by adding the rel="lightbox"
attribute to the link's "<a>" tag, and provide an optional title
that will be displayed in the pop-up box. For example, if you have a
link of the following form:
<a href="Image1.jpg"><img src="Image1Thumbnail.jpg"/></a>
Re-write the link as follows:
<a href="Image1.jpg" rel="lightbox" title="An example image"><img src="Image1Thumbnail.jpg"/></a>
Tips & Warnings
-
Images
can also be grouped, allowing the user to navigate quickly to the
previous or next image in a gallery without closing and re-opening the
Lightbox window. To associate an image with a group, put the group name
in square brackets after "lightbox" in the "rel" attribute. For example:
-
<a href="Image1.jpg" rel="lightbox[group]" title="An example image"><img src="Image1Thumbnail.jpg"/></a>
-
The
user can click the "Prev" and "Next" buttons in the Lightbox to move
through the set of images that share the same group name.
|
