Light Box - nschonni/wet-boew GitHub Wiki

français

Table of Contents Overview Purpose Implementation Options Single Items Item Gallery Hidden Item Gallery Alternative Image Title (v3.1 alpha) Examples Development Known Issues Version History References

Project Lead: Eric Poirier (@ericpoirier)

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

• Displays images and other content using the ColorBox plugin (http://www.jacklmoore.com/colorbox).
• Easy navigation in image galleries using mouse, touchscreen or keyboard.

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 Light box.

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

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

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

Working Demo

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

• English examples
• French examples

Lightbox depends on ColorBox (MIT license).

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

• js/workers/lightbox.js - contains the JavaScript code for Lightbox
• js/sass/lightbox.scss - contains the CSS for Lightbox
• js/images/lightbox - contains the images for Lightbox
• js/dependencies/colorbox.js - script file for ColorBox

There are no known technical issues. If you find one, please contribute by filing an issue.

• Lightbox.js
• _lightbox.scss
• Colorbox.js

• ColorBox