Shedding Some Light on Lightbox | WebReference

Shedding Some Light on Lightbox

By Arpan Dhandhania


Hello and welcome to the first part of what I hope will be an interesting series of articles on the various implementations of Lightbox.

What is Lightbox?

OK, consider this. On your homepage, you want to put up five or six images. Now if they are nice and large, the page will take forever to load. Chances are that visitors will be put off by how long it is taking for the page to load and move on to another website.

You could reduce the load time by only showing thumbnails of the images, but then the visitors miss out on the details in the pictures.

Now what if I told you that you can keep the load time of the page low and also show the images in full size? Load the page with the thumbnails, and when the user clicks on any thumbnail, the browser downloads the full size version of the image and displays it.

That's what Lightbox is all about. It is a fancy name given to a simple solution to a common problem. It has been created by Lokesh Dhakar. Many people have implemented the same concept with minor variations. Lightbox uses the Prototype framework and the Scriptaculous Effects library. Similarly, there is an implementation that uses the jQuery library. Let us see how you can use Lightbox on your website.

Lightbox 2

Lightbox 2 is version 2 of Lightbox. You can download the library here. Here is a list of features of Lightbox 2:

  • Supports all modern browsers.
  • Play music in the background when the slideshow is on.
  • Very easy to use.

Examples

Single Photos

Photo Album

How to Use

  1. Include Javascript files.
    Lightbox uses the Prototype framework and the Scriptaculous Effects library. We need to include them as well as the Lightbox library.


  2. Include CSS files.
    Include the style sheet for styling the Lightbox.


  3. Activate Lightbox.
    To activate Lightbox, you need to add rel="lightbox" attribute to any link tag. For example:


    If you have a set of images and you want to display them in slideshow mode, use the following code:

Thats it!

The general syntax for the Lightbox is:

I would like to bring the three attributes of the link tag to your notice:

  • href: path to the large version of the photo.
  • rel: by putting 'Lightbox' as its value, we indicate that this link isn't a regular link, it needs to be handled by Lightbox. If it is part of an image set (like in the second example), we need to put the image set name in square brackets.
  • title: the caption for the photo can be put here. It will be displayed in the navigation bar when the Lightbox window is shown.

Configure

Lightbox v2.04 allows you to customize a bunch of things. Let us look at the configurable parameters. To set these parameters, you need to edit the lightboxEx.js file.

  • resizeSpeed: controls the speed of the image resizing.
    Range: 1 - 10 (1 = slowest and 10 = fastest)
    Default: 7
  • borderSize: thickness of the border around the photo (in pixels).
    Default: 10
  • slideShowWidth: width of the slideshow window.
    Values: -1 signifies that the width depends on the width of the image. Otherwise specify the width of the slideshow window in pixels.
  • slideShowHeight: height of the slideshow window.
    Values: -1 signifies that the height depends on the height of the image. Otherwise, specify the height of the slideshow window in pixels.
  • navigationBarWidth: width of the navigation bar.
    Values: -1 signifies that the width of the navigation bar depends on the width of the image. Otherwise assign the width of the navigation bar in pixels.
  • slideshow: auto start slideshow or not.
    Values: 1 indicates that the slideshow should auto start. 0 indicates that the slideshow shouldn't auto start.
    Default: 1
  • foreverLoop: after showing the last image, immediately continue with first image.
    Values: 0 indicates that the slideshow should stop on the last image. 1 indicates that the slideshow should continue looping forever.
    Default: 0
  • loopInterval: duration (in miliseconds) each slide should be displayed.
    Default: 4000
  • loopMusic: loops music if it is shorter then slideshow.
    Values: 'true' indicates that the music should loop. 'false' indicates that the music should stop after playing once. Default: true.
  • imageDataContainerOpacity: opacity of the area around the slideshow window.
    Values: 0 - 1
    Default: 0.6
  • resize: resize Lightbox window based on the size of the photo or not.
    Values: 1 indicates that the slideshow window should automatically resize. 0 indicates that it shouldn't resize.
    Default: 1
  • homeURL: relative path to your directory where all the Lightbox files are stored.

If you want to use a different graphic when the slideshow is loading, you can change the path of fileLoadingImage in the same file. While Lightbox allows you to tweak the parameters mentioned above, it has its limitations.

  • There is no way to hide the navigation bar.
  • If the design of the Lightbox doesn't go with the design of your site, you can't easily skin it.
  • Clicking outside the lightbox doesn't hide it.
  • It doesn't allow you to set different settings for different image sets. You can't set different background music for two different image sets on the same page, since the settings are specified in the library file.
  • It supports only images. What if I want to show a video in the Lightbox?

When all is said and done, Lightbox is a very handy component. Just by including 4 files and adding rel="lightbox" to the link tags, we can display as many images on our web page without worrying about increasing the load time of the page.

Until Next Time ...

This wraps up the first session. We saw that Lightbox 2 supports only images. In the next part, we will look at another implementation that allows us to embed Flash videos and other HTML components into the Lightbox window.