Media

Media components handle large objects such as images. For responsive images and videos without JavaScript, see Media Styles.

Lightbox

Add lightboxed to an image to get Expressive's material-style enlarge-on-click behavior. Click the image and it centers and grows. Click it again, scroll, or press Escape to dismiss it. The image keeps the same 12px corners as responsive-img. AutoInit() starts every .lightboxed image except those marked no-autoinit.

Lightbox ignores repeated open or close requests. Reopening while it closes cancels the old transition, and a canceled transition does not call its completion callback. Reduced motion skips animation, including when the preference changes while the lightbox is mounted. Destroying the instance restores the image and releases the styles, listeners and pending callbacks it owns. Lightbox enlarges images. It does not provide a modal-gallery focus contract.

<img class="lightboxed" tabindex="0" role="button" width="650" alt="A mountain lake" src="images/sample-1.jpg">

Initialization

document.addEventListener('DOMContentLoaded', function() {
  const elems = document.querySelectorAll('.lightboxed');
  const instances = Expressive.Lightbox.init(elems, {
    // specify options here
  });
});

Options

Methods

All methods are called on the plugin instance. You can get the instance like this:

const instance = Expressive.Lightbox.getInstance(elem);

.open();

Open the lightbox.

instance.open();

.close();

Close the lightbox.

instance.close();

.destroy();

Destroy the plugin instance and tear down its event handlers.

instance.destroy();

Properties

Name	Type	Description
el	Element	The DOM element the plugin was initialized with.
options	Object	The options the instance was initialized with.
overlayActive	Boolean	Whether the lightbox overlay is showing.
doneAnimating	Boolean	Whether the open or close animation has finished.
caption	String	Caption text, if specified.
originalWidth	Number	Original width of the image.
originalHeight	Number	Original height of the image.

Captions

Add a short caption with the data-caption attribute.

<img class="lightboxed" tabindex="0" role="button"
     data-caption="A path through trees in a park"
     width="250"
     alt="A path through trees"
     src="images/sample-2.jpg">