Lightbox

Overview

Project Lead: Eric Poirier (@ericpoirier)

Light box is a jQuery plugin that helps you build photo gallery out of pictures on a web page.

Purpose

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

Implementation

Each picture gallery groups and single pictures must be inside its own <div> using the "wet-boew-lightbox" class. Also, every <img> elements must be inside its own <a>.

Example:

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

Note: The class "lb-item" is used here as an example. Bellow are the options to implement the Lightbox.

Options

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

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

Sending Additional data to AJAX content

It is possible to send additional data to AJAX content via the POST HTTP method. The data is specified on individual lightbox items using the data-wet-boew-lightbox attribute and the postData parameter. The data assigned to the postData parameter must be a valid JSON object.

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

Examples

Development

Lightbox depends on ColorBox (MIT license).

The code for Lightbox is located in several places within the source folder of WET:

Known Issues

None at this time.

Version History

References