Author Archive

Why Lightbox is Better than Thumbnail!

November 22nd, 2009 Comments off

Lightbox is an easy way to incorporate many different images into a small element on your webpage. Some benefits to having lightbox instead of a thumbnail page include smoother loading and operation on the page. Users can organize and tag their pictures with captions without creating a page that slower connections can’t load quickly. Also in relation to the lightbox page’s operation users can expect viewers to enjoy the added ease-of-use of lightbox to browse full-sized images quickly.

Below is the protocol for integration of lightbox into the code for your page. This is found at


How to Use

Part 1 – Setup

  1. Lightbox 2 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header (in this order).
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
  2. Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
  3. Check the CSS and make sure the referenced prev.gif and next.gif files are in the right location. Also, make sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location.

Part 2 – Activate

  1. Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example:
    <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

    Optional: Use the title attribute if you want to show a caption.

  2. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:
    <a href="images/image-1.jpg" rel="lightbox[roadtrip]“>image #1</a>
    <a href=”images/image-2.jpg” rel=”lightbox[roadtrip]“>image #2</a>
    <a href=”images/image-3.jpg” rel=”lightbox[roadtrip]“>image #3</a>

    No limits to the number of image sets per page or how many images are allowed in each set. Go nuts


This post is informative because it is the most basic information relating to use of lightbox in a page. Apart from the technical value of the post its highlighted here how unobtrusive lightbox is in the code. Also you can see that all of the images can be loaded from one or many directories if properly tagged with the rel="lightbox" attribute . This presents a clear organizational advantage over thumbnail and embedding methods.

It bears mentioning that for every image you include that hasn’t already been loaded to your page will require you to enter in a new line of code. All the files included in lightbox must be accessable (in the same directory as the .html file.) Also the comment about bracketed [album] tags means that if you write into the code a bracketed title for a group. If properly written into the code the images will appear as a group with the title [Roadtrip!]

Categories: Uncategorized Tags: