Lightbox

Table of contents

Features

Examples

Long description of image 2

Example long description of image 2 (referenced by aria-describedby).

Single items

  • Image 1
  • AJAX - Example 1
  • AJAX - override default behaviour of image link with lbx-ajax
    Image 1
  • Inline content
  • Modal popup
  • AJAX - Content filtered by URL hash (v4.0.7+)
  • AJAX - Content filtered by selector (v4.0.12+)

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" type="button">Close modal popup</button>
			</div>
		</section>
	</li>
		<li>
			<a class="wb-lbx" title="AJAX - Content filtered by the URL hash" href="ajax/ajax4-en.html#filter-id">AJAX - Content filtered by URL hash (v4.0.7+)</a>
		</li>
		<li>
			<a class="wb-lbx" title="AJAX - Content filtered by a selector" href="ajax/ajax4-en.html" data-wb-lbx='{"filter": ".filter-selector"}'>AJAX - Content filtered by a selector (v4.0.12+)</a>
		</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

Image gallery

Code
View code
<section class="wb-lbx lbx-hide-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-hide-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>

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" type="button">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: