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

Single items

Example

  • Image 1
  • Image 2
  • AJAX content
  • Inline content
    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

Coding

<div class="wet-boew-lightbox">
  <ul>
    <li>
      <a class="lb-item" href="images/image_source.jpg" title="Alt text for the image">
        <img src="images/image_source.jpg" alt="Alt text for the image" class="image-actual" />
      </a>
    </li>
    ...	
    <li>
      <a class="lb-item" title="Example of AJAX content" href="ajax/ajax-eng.html">AJAX content</a>
    </li>
    <li>
      <a class="lb-item" title="Example of inline content" href="#inline_content1">Inline content</a>
    </li>
  </ul>
</div>

Item gallery

Example

  • Image 1
  • Image 2
  • AJAX content
  • Inline content
    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

Coding

<div class="wet-boew-lightbox">
  <ul class="lb-gallery">
    <li>
	  <a class="lb-item-gal" href="images/image_source.jpg" title="Alt text for the image">
		<img src="images/image_source.jpg" alt="Alt text for the image" class="image-actual" />
	  </a>
    </li>
    ...
    <li>
	  <a class="lb-item-gal" title="Example of AJAX content" href="ajax/ajax-eng.html">AJAX content</a>
    </li>
    <li>
	  <a class="lb-item-gal" title="Example of inline content" href="#inline_content2">Inline content</a>
    </li>
  </ul>	
</div>

Hidden item gallery

Example

  • Image 1
  • Image 2
  • AJAX content
  • Inline content
    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

Coding

<div class="wet-boew-lightbox">
  <ul class="lb-gallery-hidden">
    <li>
      <a class="lb-item-gal" href="images/image_source.jpg" title="Alt text for the image">
        <img src="images/image_source.jpg" alt="Alt text for the image" class="image-actual" />
      </a>
    </li>
    ...
    <li>
      <a class="lb-item-gal" title="Example of AJAX content" href="ajax/ajax-eng.html">AJAX content</a>
    </li>
    <li>
      <a class="lb-item-gal" title="Example of inline content" href="#inline_content2">Inline content</a>
    </li>
  </ul>	
</div>