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.

Questions or comments?

Purpose

Display images and other content in a dialog box, either individually or as part of a gallery. Implements the WAI-ARIA Dialog (Modal) design pattern.

Working example

How to implement

Single items

  1. Add a link element to the page with the class wb-lbx.
  2. Add an href attribute on the link element that points to the image (e.g., href="demo/1_b.jpg"), the file containing the content (e.g., ajax/ajax.html) or the id of the inline content (e.g., href="#inline-content).
  3. Add a title attribute to the link element with the caption text.

Galleries

  1. Add a section or other element to the page with the classes wb-lbx and lbx-gal.
  2. Add within the section or other element a link element for each item in the gallery.
  3. Add an href attribute on each link element that points to the image (e.g., href="demo/1_b.jpg"), the file containing the content (e.g., ajax/ajax.html) or the id of the inline content (e.g., href="#inline-content).
  4. Add a title attribute to each link element with the caption text.

Configuration options

Option Description How to configure Values
lbx-hide-gal Hides all but the first item in the gallery. Add lbx-hide-gal to the class attribute of the section or other element of the gallery. n/a
lbx-modal Make the lightbox behave like a modal dialog. Add lbx-modal to the class attribute of the link element. n/a
lbx-modal Make the lightbox behave like a modal dialog. Add lbx-modal to the class attribute of the link element. n/a
popup-modal-dismiss Identifies the button that is to be use to close a lightbox behaving like a modal dialog. Add popup-modal-dismiss to the link or button that will be used to close the lightbox behaving like a modal dialog. n/a

Events

Document the public events that can be used by implementers or developers.

Event Trigger What it does
wb-init.wb-lbx Triggered manually (e.g., $( ".wb-lbx" ).trigger( "wb-init.wb-lbx" );). Used to manually initialize the Lightbox plugin. Note: The Lightbox plugin will be initialized automatically unless the Lightbox markup is added after the page has already loaded.
wb-ready.wb-lbx (v4.0.5+) Triggered automatically after a lightbox is initialized. Used to identify when a lightbox has initialized (target of the event) 
$( document ).on( "wb-ready.wb-lbx", ".wb-lbx", function( event ) {
});
$( ".wb-lbx" ).on( "wb-ready.wb-lbx", function( event ) {
});
wb-open.wb-lbx (v4.0.4+) Triggered manually: 
$( document ).trigger( "open.wb-lbx", [
	[
		{
			src: "demo/1_b.jpg",
			type: "image"
		}
	],
	false,
	[
		"Image 1"
	]
]);
 Used to manually open a Lightbox popup. Can be used to load single popups, galleries and modal popups. See Opening popups through JavaScript for working examples.
wb-ready.wb (v4.0.5+) Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing. 
$( document ).on( "wb-ready.wb", function( event ) {
});
mfp* events (e.g., mfpClose Events triggered automatically by Magnific Popup (documentation on Magnific Popup events. Used by Magnific Popup to identify what events are occurring. $.magnificPopup.instance contains the properties of the popup in question.
  • Opened with .wb-lbx: 
    $( ".wb-lbx" ).on( "mfpClose", function( event ) {
	$.magnificPopup.instance.items[ 0 ].data.src;
	
	if ( src === "#inline_content" ) {
	} else if ( src === "demo/1_b.jpg" ) {
	}
});
  • Opened with JavaScript: 
    $( document ).on( "mfpClose", function( event ) {
	$.magnificPopup.instance.items[ 0 ].data.src;
	
	if ( src === "#inline_content" ) {
	} else if ( src === "demo/1_b.jpg" ) {
	}
});

Source code

Lightbox source code on GitHub

Date modified: