- Skip to main content
- Skip to footer

# Light Box

- Documentation
- Questions or comments?

## Table of contents

- Features
- Examples
  - Single items
  - Item gallery
  - Hidden item gallery
  - Alternative image title

## Features

- Displays images and other content using the ColorBox plugin.
- Easy navigation in image galleries using mouse, touchscreen or keyboard.

## Examples

1. ordered list (`ol`) first level default appearance
2. ordered list (`ol`) first level default appearance
   1. ordered list (`ol`) second level default appearance
   2. ordered list (`ol`) second level default appearance
      1. ordered list (`ol`) third level default appearance
      2. ordered list (`ol`) third level default appearance

Link default appearance

Long description of image 2

Example long description of image 2 (referenced by `aria-describedby`).

### Single items

#### Example

- AJAX content
- Inline content

#### Coding

    <div class="wet-boew-lightbox">
      <ul>
        <li>
          <a class="lb-item" href="images/1_b.jpg" title="Image 1">
            <img src="images/1_s.jpg" alt="Image 1" class="image-actual" />
          </a>
        </li>
        <li>
          <a class="lb-item" href="images/2_b.jpg" title="Image 2">
            <img src="images/2_s.jpg" alt="Image 2" aria-describedby="image2-desc" longdesc="#image2-desc" class="image-actual" />
          </a>
        </li>
        <li>
          <a class="lb-item" title="Example of AJAX content" href="ajax/ajax-en.html">AJAX content</a>
        </li>
        <li>
          <a class="lb-item" title="Example of inline content" href="#inline_content">Inline content</a>
        </li>
      </ul>
    </div>

### Item gallery

#### Example

- AJAX content
- Inline content

#### Coding

    <div class="wet-boew-lightbox">
      <ul class="lb-gallery">
        <li>
    	  <a class="lb-item-gal" href="images/1_b.jpg" title="Image 1">
    		<img src="images/1_s.jpg" alt="Image 1" class="image-actual" />
    	  </a>
        </li>
        <li>
    	  <a class="lb-item-gal" href="images/2_b.jpg" title="Image 2">
    		<img src="images/2_s.jpg" alt="Image 2" aria-describedby="image2-desc" longdesc="#image2-desc" class="image-actual" />
    	  </a>
        </li>
        <li>
    	  <a class="lb-item-gal" title="Example of AJAX content" href="ajax/ajax-en.html">AJAX content</a>
        </li>
        <li>
    	  <a class="lb-item-gal" title="Example of inline content" href="#inline_content">Inline content</a>
        </li>
      </ul>
    </div>

### Hidden item gallery

#### Example

- AJAX content
- Inline content

#### Coding

    <div class="wet-boew-lightbox">
      <ul class="lb-hidden-gallery">
        <li>
          <a class="lb-item-gal" href="images/1_b.jpg" title="Image 1">
            <img src="images/1_s.jpg" alt="Image 1" class="image-actual" />
          </a>
        </li>
        <li>
          <a class="lb-item-gal" href="images/2_b.jpg" title="Image 1">
            <img src="images/2_s.jpg" alt="Image 1" aria-describedby="image2-desc" longdesc="#image2-desc" class="image-actual" />
          </a>
        </li>
        <li>
          <a class="lb-item-gal" title="Example of AJAX content" href="ajax/ajax-en.html">AJAX content</a>
        </li>
        <li>
          <a class="lb-item-gal" title="Example of inline content" href="#inline_content">Inline content</a>
        </li>
      </ul>
    </div>

### Alternative image title (v3.1)

#### Example

Image 1: Lorem ipsum consectetur adipiscing elit.

Image 2: Nulla mollis dolor leo. Quisque laoreet tincidunt mollis. Duis posuere scelerisque lectus quis lobortis.

#### Coding

    <div class="wet-boew-lightbox">
      <ul class="lb-gallery">
        <li>
    	  <a class="lb-item-gal" href="images/1_b.jpg" title="Image 1" data-title="image_1_b">
    		<img src="images/1_s.jpg" alt="Image 1" class="image-actual" />
    	  </a>
        </li>
        <li>
    	  <a class="lb-item-gal" href="images/2_b.jpg" title="Image 2" data-title="image_2_b">
    		<img src="images/2_s.jpg" alt="Image 2" aria-describedby="image2-desc" longdesc="#image2-desc" class="image-actual" />
    	  </a>
        </li>
      </ul>
    </div>
    <p id="element_id">Title of the image</p>

Date modified:
  2013-04-11