## Examples

### Two individual images

### Four image set

## How to use

### Step 1 - Load the Javascript and CSS

1. Download and unzip the latest version of Lightbox.
2. Look inside the `js` folder to find `jquery-1.11.0.min.js` and `lightbox.min.js` and load both of these files. Load jQuery first.

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

3. Look inside the `css` folder to find `lightbox.css` and load it.

       <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`.

### Step 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" data-title="My caption">Image #1</a>

  Optional: Add a `data-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>

## Help

### Have a feature request?

If you want a feature added, create an issue on Github. Someone else or I might be able to help out. No guarantees.

### Found a bug?

If you find a bug, create an issue on Github. Include your operating system and browser version along with detailed steps on how to reproduce the bug.

### Can't get Lightbox working?

If you followed the instructions, but still can't get Lightbox working, search Stackoverflow to see if other people have run into the same issue as you. If not, post a new question.

### Looking for older versions?

You can access older versions and see a changelog on the Github releases page.

## Donate

Lightbox is 100% free to use. If you're using Lightbox on a commercial project and feeling generous, consider a donation. Thanks!

Tweet