Light Box

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

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" 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

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" 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

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" 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>