Lightbox is a simple, unobtrusive script used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers.


Examples

Single image

Image set


How to use

Part 1 - Setup

  1. Lightbox 2 uses the jQuery framework. The jQuery and the Lightbox javascript files must be loaded in the proper order. To load the javascript files, add the following lines into your <head> section.
    <script src="/addons/lightbox2/js/jquery-1.7.2.min.js"></script><script src="/addons/lightbox2/js/lightbox.js"></script>
  2. Include the Lightbox CSS file by adding the following line into your <head> section.
    <link href="/addons/lightbox2/css/lightbox.css" rel="stylesheet" />

Part 2 - Activate

  1. Add a rel="lightbox" attribute to any link tag to activate Lightbox.
    <a href="/addons/lightbox2/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.  
  3. 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.
    <a href="/addons/lightbox/images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
    <a href="/addons/lightbox2/images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
    <a href="/addons/lightbox2/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!