Home Documentation
Getting started General
Components
Forms
Utilities
Sass Plugins
Check changelog.
1.0.0-beta.2

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.

picsum

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.

picsum2

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.
overlayColor 'grey dark-4' Set the background color 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.