Lightbox
Looking for WET v3.1?
As of September 23, 2014, version 3.1 of the Web Experience Toolkit is no longer supported. The source code and documentation have been moved to the wet-boew-legacy repository.
Table of contents
Features
- Displays images and other content using the Magnific Popup plugin.
- Easy navigation in image galleries using mouse, touchscreen or keyboard.
Examples
Long description of image 2
Example long description of image 2 (referenced by aria-describedby).
Single items
Code
View code
<ul>
<li>
<a class="wb-lbx" href="demo/1_b.jpg" title="Image 1">
<img src="demo/1_s.jpg" alt="Image 1" />
</a>
</li>
<li>
<a class="wb-lbx" title="AJAX - Example 1 of AJAX content" href="ajax/ajax-en.html">AJAX - Example 1</a>
</li>
<li>
<a class="wb-lbx" title="Example of inline content" href="#inline_content">Inline content</a>
<section id="inline_content" class="mfp-hide modal-dialog modal-content overlay-def">
<header class="modal-header">
<h2 class="modal-title">Title</h2>
</header>
<div class="modal-body">
...
</div>
</section>
</li>
<li>
<a class="wb-lbx lbx-modal" title="Example of a modal popup" href="#inline_content_modal">Modal popup</a>
<section id="inline_content_modal" class="mfp-hide modal-dialog modal-content overlay-def">
<header class="modal-header">
<h2 class="modal-title">Title</h2>
</header>
<div class="modal-body">
...
<button class="btn btn-primary popup-modal-dismiss">Close modal popup</button>
</div>
</section>
</li>
</ul>Galleries
Image gallery
Code
View code
<section class="wb-lbx lbx-gal">
<h4>Image gallery</h4>
<ul class="list-inline">
<li>
<a href="demo/1_b.jpg" title="Image 1">
<img src="demo/1_s.jpg" alt="Image 1" />
</a>
</li>
<li>
<a href="demo/2_b.jpg" title="Image 2">
<img src="demo/2_s.jpg" alt="Image 2" aria-describedby="image2-desc" longdesc="#image2-desc" />
</a>
</li>
<li>
<a href="demo/3_b.jpg" title="Image 3">
<img src="demo/3_s.jpg" alt="Image 3" />
</a>
</li>
<li>
<a href="demo/4_b.jpg" title="Image 4">
<img src="demo/4_s.jpg" alt="Image 4" />
</a>
</li>
</ul>
</section>AJAX gallery
Code
View code
<section class="wb-lbx lbx-gal">
<h4>AJAX gallery</h4>
<ul>
<li>
<a title="AJAX - Example 1 of AJAX content" href="ajax/ajax1-en.html">AJAX - Example 1</a>
</li>
<li>
<a title="AJAX - Example 2 of AJAX content" href="ajax/ajax2-en.html">AJAX - Example 2</a>
</li>
<li>
<a title="AJAX - Example 3 of AJAX content" href="ajax/ajax3-en.html">AJAX - Example 3</a>
</li>
</ul>
</section>Hidden image galleries
Alternative image title
Image 1: Lorem ipsum consectetur adipiscing elit.
Image 2: Nulla mollis dolor leo. Quisque laoreet tincidunt mollis. Duis posuere scelerisque lectus quis lobortis.
Code
View code
<div class="wb-lbx lbx-gal">
<ul class="list-inline">
<li>
<a href="demo/1_b.jpg" title="Image 1" data-title="image_1_b">
<img src="demo/1_s.jpg" alt="Image 1" />
</a>
</li>
<li>
<a href="demo/2_b.jpg" title="Image 2" data-title="image_2_b">
<img src="demo/2_s.jpg" alt="Image 2" aria-describedby="image2-desc" longdesc="#image2-desc" />
</a>
</li>
</ul>
</div>
<p id="image_1_b"><strong>Image 1:</strong> Lorem ipsum consectetur <em>adipiscing elit</em>.</p>
<p id="image_2_b"><strong>Image 2:</strong> Nulla mollis dolor leo. Quisque laoreet tincidunt mollis. Duis posuere scelerisque lectus quis lobortis.</p>Opening popups through JavaScript
Popups can be opened through JavaScript with:
$( document ).trigger( "open.wb-lbx", [
[
{
src: "demo/1_b.jpg",
type: "image"
}
],
false,
[
"Image 1"
]
]);Code
View code
HTML
<label for="lbx-select">Lightbox to open</label>
<select id="lbx-select">
<option value="1">Image</option>
<option value="2">AJAX</option>
<option value="3">Inline content</option>
<option value="4">Modal popup</option>
<option value="5">Image gallery</option>
</select>
<button id="lbx-open-btn">Open lightbox</button>JavaScript
(function( $, wb ) {
"use strict";
var $document = wb.doc;
$document.on( "click vclick", "#lbx-open-btn", function( event ) {
var value = $( "#lbx-select" ).val();
if ( value === "1" ) {
$document.trigger( "open.wb-lbx", [
[
{
src: "demo/1_b.jpg",
type: "image"
}
],
false,
[
"Image 1"
]
]);
} else if ( value === "2" ) {
$document.trigger( "open.wb-lbx", [
[
{
src: "ajax/ajax1-en.html",
type: "ajax"
}
]
]);
} else if ( value === "3" ) {
$document.trigger( "open.wb-lbx", [
[
{
src: "#inline_content",
type: "inline"
}
]
]);
} else if ( value === "4" ) {
$document.trigger( "open.wb-lbx", [
[
{
src: "#inline_content_modal",
type: "inline"
}
],
true
]);
} else if ( value === "5" ) {
$document.trigger( "open.wb-lbx", [
[
{
src: "demo/1_b.jpg",
type: "image"
}, {
src: "demo/2_b.jpg",
type: "image"
}, {
src: "demo/3_b.jpg",
type: "image"
}
],
false,
[
"Image 1",
"Image 2",
"Image 3"
]
]);
}
});
})( jQuery, wb );- Date modified: