Lightbox

Purpose

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

Single Items

To implement Light box to a single image/picture on your page you need to use the class lb-item on the <a> tags.

<div class="wet-boew-lightbox">
  <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>
</div>

Working Demo

Item Gallery

To implement Light box to a group of images/pictures on your page you need to use this code:

<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>...</li>
    <li>...</li>
  </ul>
</div>

Working Demo

Hidden Item Gallery

To implement Light box to a group of hidden images/pictures on your page you need to use this code:

<div class="wet-boew-lightbox">
  <ul class="lb-hidden-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>...</li>
    <li>...</li>
  </ul>
</div>

Working Demo

Alternative Image Title

To implement an alternative image title for a light box use the light box link's data-title attribute to specify a page element by its ID:

<div class="wet-boew-lightbox">
  <a class="lb-item" href="image/image_source.jpg" title="Alt text for the image" data-title="element_id">
    <img src="image/image_source.jpg" alt="Alt text for the image">
  </a>
</div>
<p id="element_id">Alternative light box title for the image</p>

Working Demo

Styling

By default, there are no additional classes used to style the gallery as it appears in the working demo. In order to style the lightbox gallery to look like it does in the demo, some extra classes can be used to remove the bullets, indentation and resize the images:

<div class="wet-boew-lightbox">
   <ul class="lb-gallery equalize list-bullet-none indent-none">
      <li class="span-2 float-left margin-right-none" >
         <a class="lb-item-gal" href="image1.jpg" title="Image 1 title">
            <img src="thumb_image1.jpg" alt="Image 1 title" />
         </a>
      </li>
      <li class="span-2 float-left margin-right-none" >
         <a class="lb-item-gal" href="image2.jpg" title="Image 2 title">
            <img src="thumb_image2.jpg" alt="Image 2 title" />
         </a>
      </li>
[...]
</ul></div>

Force Photo Link

Applying the force-photo class on the div containing wet-boew-lightbox forces Light Box to display a link as a photo. Use this when automatic photo detection fails (such as using a url like photo.php or &photo=1234 instead of photo.jpg)

Example:

<div class="wet-boew-lightbox force-photo">
  <a class="lb-item" href="photo.php" title="Alt text for the image">
    <img src="image/image_source.jpg" alt="Alt text for the image">
  </a>
</div>

Applying Additional Settings

There are many behaviours for the Light Box plugin (based on the ColorBox project) which are documented here. To apply these additional settings, add a data-wet-boew attribute containing your additional settings like so:

<div class="wet-boew-lightbox" data-wet-boew="speed:5000,opacity:0.1">

<div class="wet-boew-lightbox">
	<ul>
		<li class="box">
			<a class="lb-item" title="Example of AJAX content" data-wet-boew-lightbox='{"postData": {"foo":"bar", "ping":"pong"}}' href="ajax/ajax-en.html">AJAX content</a>
		</li>
	</ul>
</div>