Lightbox
Looking for WET v3.1?
WET v4.0 is now the current version. There is a new location for the current page in WET v3.1.
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
Example
View code
<ul class="list-inline">
<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">
<ol>
<li>ordered list (<code>ol</code>) first level default appearance</li>
<li>ordered list (<code>ol</code>) first level default appearance
<ol>
<li>ordered list (<code>ol</code>) second level default appearance</li>
<li>ordered list (<code>ol</code>) second level default appearance
<ol>
<li>ordered list (<code>ol</code>) third level default appearance</li>
<li>ordered list (<code>ol</code>) third level default appearance</li>
</ol>
</li>
</ol>
</li>
</ol>
<p><a href="#">Link default appearance</a></p>
</div>
</section>
</li>
<li class="box">
<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">
<ol>
<li>ordered list (<code>ol</code>) first level default appearance</li>
<li>ordered list (<code>ol</code>) first level default appearance
<ol>
<li>ordered list (<code>ol</code>) second level default appearance</li>
<li>ordered list (<code>ol</code>) second level default appearance
<ol>
<li>ordered list (<code>ol</code>) third level default appearance</li>
<li>ordered list (<code>ol</code>) third level default appearance</li>
</ol>
</li>
</ol>
</li>
</ol>
<button class="btn btn-primary popup-modal-dismiss">Close modal popup</button>
</div>
</section>
</li>
</ul>Galleries
Examples
Image gallery
AJAX gallery
View code
<section class="wb-lbx lbx-gal">
<h5>Image gallery</h5>
<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>
<section class="wb-lbx lbx-gal">
<h5>AJAX gallery</h5>
<ul class="list-inline">
<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
Examples
View code
<section class="wb-lbx lbx-hide-gal">
<h5>Image gallery</h5>
<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>
<section class="wb-lbx lbx-hide-gal">
<h5>AJAX gallery</h5>
<ul class="list-inline">
<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>Alternative image title
Example
Image 1: Lorem ipsum consectetur adipiscing elit.
Image 2: Nulla mollis dolor leo. Quisque laoreet tincidunt mollis. Duis posuere scelerisque lectus quis lobortis.
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>- Date modified: