Tutorial #34
Image Thumbnails and Lightboxes Intermediate   2013-12-30

Introduction

If you have a number of images that you want to display on a web page you have several options.

You can show them sequentially on the page such as you see on Tumblr blogs (for example: NatGeoFound). The problem here is that the user has to scroll down to see all the images.

You can show them in the space of a single image by using a slideshow, which was covered in Tutorial 17 - Simple Slideshow. But here you have to wait or click through to see all the images.

A good solution in some cases is to show Thumbnail Images which a user can click on if they want to see a larger version. You can provide an overview of the image collection in a limited amount of space and it works well if there is accompanying text longer than, say, a single sentence.

The expanded images that appear as popup windows, and which often use an animated transition, are commonly referred to as Lightboxes and there are many scripts and libraries that implement them.

This tutorial describes a simple Lightbox library called Facebox written by Chris Wanstrath. The demo code produces a display like this, where clicking on the thumbnail brings up a larger popup window that is overlaid on a grayed out page.

Demo 1 screenshot for this tutorial


Step by Step

1: Download the latest version of the code from https://github.com/defunkt/facebox

2: Unzip the distribution - you will see several directories but all we need is in the src sub directory.

3: Copy the files in the src directory into your public folder on your web server. You could split the files into different directories if you want. In this example I have left them all in a directory called facebox in the public folder.

Image 1 for this tutorial

That is all the installation that is needed. Now let's look at the source for the demo...


Understanding the Code

facebox is easy to set up and use. It relies on jQuery so you need to load this library before anything else. Then you load the facebox Stylesheet and JavaScript files.

In the jQuery .ready function, we select all a links that have the attribute key rel set to facebox and call the facebox function on those.

We tell that function where to find the image to use for a close icon, which is typically an 'X', and the one to display while a remote ajax call is fetching a remote image or file. You can change these as needed but you probably want to use the existing ones as a guide.

That's all there is to the script. Below is the HTML code where we define our images etc.

Each of the four thumbnails here consists of a link to the full size image and that link is given the rel="facebox" key value pair, which is what connects it to the facebox machinery. Instead of text within the a tag pair, we use an img tag which shows the target image but at a much reduced size, specified by the width attribute. This is the Thumbnail which we can show without having to generate separate, smaller image files. For high performance servers, there might be some advanatage of using separate small files, but not here.



That's it ... simple, clean... just works...

Take a look at the facebox documentation for more examples. You can also use it to display hidden divs on your page, or remote pages loaded automatically via ajax.


Alternative Approaches

There are a LOT of JavaScript Lightbox libraries - here are a few of the better known ones:

Lightbox2

Shadowbox.js

fancyBox

Take a look at the style and features of these and others and see which one is a good match to your needs. facebox is pretty basic and I am perfectly happy with that. If you want to add captions to the larger images then one of the others might be better.


Code for this Tutorial


Share this tutorial


Related Tutorials

17 : Simple Slideshow   (Intermediate)

29 : Image Magnifying Glass   (Intermediate)

39 : Fullscreen API   (Intermediate)


Comment on this Tutorial


comments powered by Disqus