Light Box

Table of contents

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

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

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

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>