Lightbox

Vous cherchez la BOEW v3.1?

À partir du 23 septembre 2014, la version 3.1 de la Boîte à outils de l'expérience Web n'est plus supportée. Le code source et la documentation ont été déplacés vers le dépôt wet-boew-legacy.

Questions ou commentaires?

Needs translation

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 de modification :