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.
Purpose
Display images and other content in a dialog box, either individually or as part of a gallery.
Working example
How to implement
Single items
- Add a link element to the page with the class
wb-lbx
. - 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
). - Add a
title
attribute to the link element with the caption text.
Galleries
- Add a
section
or other element to the page with the classeswb-lbx
andlbx-gal
. - Add within the
section
or other element a link element for each item in the gallery. - 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
). - 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., $elm.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. |
Source code
- Date modified: