Media

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

Lightbox

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

<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

Name	Type	Default	Description
inDuration	Number	275	Open transition duration, in milliseconds.
outDuration	Number	200	Close transition duration, in milliseconds.
onOpenStart	Function	null	Called before the lightbox opens.
onOpenEnd	Function	null	Called after the lightbox opens.
onCloseStart	Function	null	Called before the lightbox closes.
onCloseEnd	Function	null	Called after the lightbox closes.

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">