How to get the free Lightbox image viewer on your site

06 December, 2009

You will have no doubt seen the free image viewer Lightbox used to view images on a site. In today's article we take a look at how easy it is to get Lightbox working on your site, for your images.

First, let's take a look at what Lightbox is in case you're unaware. Lightbox is an effect (created by JavaScript, CSS and some images) of overlaying an image over a webpage, while shading out the webpage in the background. This is great for viewing larger versions of thumbnails.

Let's take a look at it in action. Below you can see a thumbnail of blue gradient. We have linked that to the larger version of the file. If you click on the thumbnail, rather than the full size image opening up (either in this page, or a new window) it appears in the Lightbox overlay, with this page dimmed in the background. Click on the thumbnail below, and check it out.

Pretty cool, huh? And you will have noticed that rather than just appearing, the Lightbox overlay extends from a central point, both first vertically then horizontally, to the required size. This nice effect is all controlled by the JavaScript, so you don't need to worry about how it's done.

Now that we're all up to speed with what Lightbox is, let's take a look at how easy it is to get it integrated into your site.

Lightbox is simply implemented by linking a CSS file and some JavaScript files to the webpage, and uploading a couple of images as well.

First off, you need to download the necessary Lightbox files. They come from here: http://www.huddletogether.com/projects/lightbox2/releases/lightbox2.04.zip. In this ZIP file is everything we need to set up Lightbox on your site. With the file downloaded, extract the contents.

Now comes the easy part. You will see three directories: css, image and js. Copy the contents of the each of these directories to where you want them on your site. If you have separate directories for JavaScript, CSS, etc. then put the files in there with the rest of your files. If not, you can just copy these directories as they are to your site directory, or whatever you choose. It doesn't really matter.

With the files copied to your site, we need to make a couple of simple checks and adjustments to make sure things can link to each other OK. First, open the lightbox.css file from the css directory we just copied over. Down at around line 16 you will see two image links - make sure these image links point to wherever you just copied the images to. Remember, the link is relative to the where this CSS file is, not the page it will be included on.

Next, we need to do something similar with the JavaScript file lightbox.js. At around line 49 you will see another two image paths. Again, these paths must be correct to where you have copied over the images to your site, but this time the path is relative to the page where the JavaScript is running, not the JavaScript file itself.

Once you're confident you have the image paths all sorted, we can begin to put Lightbox on the page.

First start by including the JavaScript files in the head section of your HTML. You can see an example of this below. We have put the Lightbox JavaScript files into a lightbox subdirectory of our js directory. You should modify the path to your files so it is correct.

With our JavaScript included, we just need to link to the CSS file. Again, you should modify the path to direct it to your CSS file.

We're just about ready to rock, we just need to adjust our HTML to get Lightbox working on our images. If you already have a thumbnail image linking to another image, then all we need to do is add a rel attribute to the link. If you don't have an image link already set up, set up a basic one now: one image linking to another.

The rel attribute we need to add is simple, just rel="lightbox". Take a look below to see the entire link we use for the blue gradient image above.

Just a simple image, linking to another image, but with our rel="lightbox" attribute added that the Lightbox code looks for.

And it's as simple as that. That's all we need to do to get Lightbox working on our page - link to the JavaScript and CSS files, change some image paths and add a rel attribute to our link.

Before we finish though, we'll take a quick look at another feature of Lightbox - the ability to link in more than one image and navigate through them with Lightbox.

If you have more than one image set up to use Lightbox, you can navigate through the images by clicking on the left and right sides of the Lightbox and it will automatically load in the images.

We have quickly set this up for two images below. Click on one, then click on the left or ride side of the Lightbox to move to the next or previous image.

This is where some of our image paths earlier come in - to link to the Next and Prev images.

Adding this functionality to a group of images is really easy too. All we need to do is add some extra text in the rel attribute we declare, essentially adding the images to the same array so Lightbox can group them together. Take a look below at the code we use for our two images. You can add as many images to the same group as you like - we've just restricted ourselves to two due to time constraints.

So simply by grouping your images together in the rel attribute, you can make sets of images for Lightbox to navigate through. And, by using different names for different groups, you can have many images on one page, in many different groups.

That's about it for Lightbox. It's a great technology that is very simple to implement and creates a great effect for your image viewing. Enjoy.

ferrari_chris