Groups of images can be presented on the web in a variety of different ways. There are galleries, sliders, and Lightbox image viewers, all of which can be constructed in an unlimited number of ways. For instance, image viewers can be built using some combination of HTML, CSS, JavaScript, jQuery, or even Flash.
Although the best solution will be standards compliant and have a small footprint of roughly 25K or less, the right solution often depends on the specific needs of the website.
To illustrate, suppose you’re designing a site for an artist who wants to have a portfolio page with eight small images organized into a grid, and when you click any of the smaller images, a larger version will display onscreen. One of the best solutions for this kind of need is the Lightbox2 image viewer.
In addition to being one of the most popular image viewers today, it’s also lightweight and super easy to install.
The Lightbox2 image viewer works best when you have two sets of images. The first set is the smaller thumbnail pictures that appear when the page opens in the browser, and the second set is the larger images viewable through the Lightbox2 widget.
The following steps show how easy it is to add the Lightbox2 image viewer to a web page:
Visit the Lightbox2 website and download a copy of the Lightbox2 files.
The Lightbox Zip file contains several files, including a sample file named index.html, a folder with two JavaScript files, a folder with a CSS file, and an images folder with all the images used in the Lightbox2 image viewer. Copy the extracted contents of this Zip file into your Lightbox managed site folder.
(Optional) If you’re using Dreamweaver, create a managed site to a new folder on your computer called Lightbox.
Choose Site→New Site to create a new managed site to the new Lightbox folder. In the Site Name field enter the name Lightbox and in the Local Site Folder field, browse to and select the new Lightbox folder.
Open the file called lightbox.html in Dreamweaver or in your preferred web editor.
The layout of this file includes a table filled with eight thumbnail images, ready for you to add the Lightbox2 code.
Add the following links to the JavaScript and CSS files to the of your code:
<script src="js/jquery-1.7.2.min.js"></script> <script src="js/lightbox.js"></script> <link href="css/lightbox.css" rel="stylesheet" />
These links call the appropriate files that help make the Lightbox function.
Convert each of the thumbnail images into hyperlinks that point to their respective close-up images and include the rel="lightbox[mygroup]" attribute that activates Lightbox.
Make sure to replace mygroup with a descriptive name for your particular group of images.
For example, change the code for the first image from this:
<img src="images/1_thumb.jpg" width="180" height="180" alt="Image Title">
To this, where the thumbnail image links to the closeup:
<a href="images/1.jpg" rel="lightbox[vacation]"><img src="images/1_thumb.jpg" width="180" height="180" alt="Image Title"><b></a></b>
(Optional) If you’d like your images to include a caption, add the title attribute to the link tag, as show here:
<a href="images/1.jpg" rel="lightbox[vacation]" title="City at Night"><img src="images/1_thumb.jpg" width="180" height="180" alt="City at Night"></a>
Repeat Steps 5 and 6 for the remaining images in the table.
If desired, match the titles of your closeup images with the alternative text of their respective thumbnail images.
Save your file and preview the Lightbox2 image viewer by launching the page in your preferred browser.
Click any of the thumbnail images to see how the Lightbox2 works. You should see the browser page dim as a pop-up window appears above it displaying the close-up image of the thumbnail you clicked.
With the close-up image on your screen, hover your mouse over it to see a left or white navigation arrow appear on top of the close-up image.
Clicking the left or right side of the picture advances you from one close-up image to the next. Below the close-up, you should also see the title of the image along with the current and total number of images in the set (such as Not in Kansas, Image 5 of 8) and a big X you can click to close the Lightbox and return to the parent browser window.
If for some reason your Lightbox image viewer isn’t functioning properly, go back through the steps to check that you’ve added all the links properly. For additional help, visit the Lightbox2 Forum.