Lightbox

We created our version of the lightbox plugin, also called material box.
This allows you to create clickable images which will be smoothly enlarged.
You can escape the enlarged view by clicking on the image or the overlay, pressing the Escape key or by scrolling.
Note that you can set the width and height attributes on the img to resize it, all will work normally.

With caption

The material box component can add a caption to a lightbox to describe the image.
Here you can add HTML inside the caption to create whatever you want.

JavaScript initialization

Once HTML was setup, you can activate the lightbox with this simple code.
Just pass the id of your lightbox that you want to activate.

To know all the ways to initialize a JS component, please read the JS Init page.

Options

Property	Default value	Description
animationDuration	400	Opening and closing animation duration in ms.
overlayClass	'grey dark-4'	Set the classes of the overlay. Choose your color on the color page.
offset	150	Offset between the border of the page and the image.
mobileOffset	80	Offset between the border of the page and the image on mobile (width <= 960px).
caption	''	The caption is the HTML content you want to add as a caption.

Methods

Method	Description
open()	Open the lightbox.
close()	Close the lightbox.

Events

Event	Description
ax.lightbox.setup	Event sent when the lightbox has been setup.
ax.lightbox.open	Event sent when the lightbox opening starts.
ax.lightbox.opened	Event sent when the lightbox opening ends.
ax.lightbox.close	Event sent when the lightbox closing starts.
ax.lightbox.closed	Event sent when the lightbox closing ends.