Lightbox2

Part 1 - Get setup

1. Download and unzip the latest version of Lightbox from above.
2. Look inside the js folder to find jquery-1.10.2.min.js and lightbox-2.6.min.js and load both of these files from your html page. Load jQuery first:

   <script src="js/jquery-1.10.2.min.js"></script>
   <script src="js/lightbox-2.6.min.js"></script>
   

3. Look inside the css folder to find lightbox.css and load it from your html page:

   <link href="css/lightbox.css" rel="stylesheet" />
   

4. Look inside the img folder to find close.png, loading.gif, prev.png, and next.png. These files are used in lightbox.css. By default, lightbox.css will look for these images in a folder called img.

Part 2 - Turn it on

• Add a data-lightbox attribute to any image link to activate Lightbox. For the value of the attribute, use a unique name for each image. For example:

  <a href="img/image-1.jpg" data-lightbox="image-1" title="My caption">image #1</a>
  

  Optional: Set the title attribute if you want to show a caption.
• If you have a group of related images that you would like to combine into a set, use the same data-lightbox attribute value for all of the images. For example:

  <a href="img/image-2.jpg" data-lightbox="roadtrip">image #2</a>
  <a href="img/image-3.jpg" data-lightbox="roadtrip">image #3</a>
  <a href="img/image-4.jpg" data-lightbox="roadtrip">image #4</a>
  

• For you long time Lightbox users, don't fret, you can still enable Lightbox by using rel="lightbox". The new data-lightbox approach is preferred though as it is valid html.