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