MDB lightbox is a group of images combined in one responsive gallery. Elements are grouped in a thumbnail grid, which can be displayed as a slideshow.
Note: Read the API tab to find all available options and advanced customization
A basic example of a lightbox with the most common use case with the bootstrap grid.
Loaded images can have any aspect ratio. Their size will be automatically adjusted to the window when you open the lightbox.
The data-mdb-zoom-level
attribute allows you to define the size of
a single zoom in / zoom out.
By adding a lightbox-disabled
class to any image, you can exclude
it from your lightbox. In the example below, the third image has been disabled.
To ensure the proper performance of the page, it is recommended to include
thumbnails of images in the src attribute. Then in the
data-mdb-img
attribute add the path to the image with higher
resolution. If the data-mdb-img
attribute is omitted, the lightbox
will display the same image as in the reduced size.
Image captions can be added using the data-mdb-caption
attribute.
If it is not set, the data is taken from the alt
attribute. When
you want to disable caption, leave the data-mdb-caption
empty.
The lightbox can be successfully operated via JavaScript. There are many public
methods available such as open
, slide
,
zoomIn
, zoomOut
, or close
. All are
described in the API tab.
var lightbox = document.getElementById('lightbox');
var lightboxInstance = mdb.Lightbox.getInstance(lightbox);
var lightboxToggler = document.getElementById('lightboxToggler');
lightboxToggler.addEventListener('click', function() {
lightboxInstance.open(1);
});
var lightbox = document.getElementById('lightbox');
var instance = mdb.Lightbox.getInstance(lightbox);
instance.open();
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
$('#lightbox').lightbox('open');
Options can be passed via data attributes, JavaScript, or jQuery. For data
attributes, append the option name to data-mdb-
, as in
data-mdb-zoom-level=""
. The img
and
caption
attributes should be pinned directly to the thumbnails, not
to the lightbox wrapper element.
Name | Type | Default | Description |
---|---|---|---|
zoomLevel
|
Number / String | 1 |
Defines zoom level while zooming in or out. |
img |
String |
|
Defines regular image to load when gallery is open. If not set, the
value of src attribute is taken.
|
caption
|
String |
|
Defines caption of the image. If not set, the value of
alt attribute is taken.
|
Name | Parameters | Description | Example |
---|---|---|---|
open |
target | Opens the gallery and activates image set by the target key. Default is the first image. | instance.open(1) |
slide |
target |
Slides an image in the gallery. Available options: left ,
right , first , last . Dafault is
right direction.
|
instance.slide('last')
|
zoomIn |
Zooms in active image by one level. |
instance.zoomIn()
|
|
zoomOut
|
Zooms out active image by one level. |
instance.zoomOut()
|
|
toggleFullscreen
|
Toggles fullscreen. |
instance.toggleFullscreen()
|
|
reset |
Resets changed parameters such as position, zoom or fullscreen. | instance.reset() |
|
close |
Closes the gallery. | instance.close() |
|
dispose
|
Removes the mdb.Lightbox instance. |
instance.dispose()
|
|
getInstance
|
element | Static method which allows to get the lightbox instance associated with a DOM element. |
mdb.Lightbox.getInstance(element)
|
var lightbox = document.getElementById('lightbox');
var instance = mdb.Lightbox.getInstance(lightbox);
instance.open(1);
Name | Description |
---|---|
open.mdb.lightbox
|
Emitted when a lightbox has been toggled. |
opened.mdb.lightbox
|
Emitted when a lightbox is opened. |
slide.mdb.lightbox
|
Emitted when a lightbox has been slided. |
slided.mdb.lightbox
|
Emitted after an image slide. |
zoomIn.mdb.lightbox
|
Emitted when an image has been zoom in. |
zoomedIn.mdb.lightbox
|
Emitted after an image is zoomed in. |
zoomOut.mdb.lightbox
|
Emitted when an image has been zoom out. |
zoomedOut.mdb.lightbox
|
Emitted after an image is zoomed out. |
close.mdb.lightbox
|
Emitted when a lightbox has been toggled. |
closed.mdb.lightbox
|
Emitted when a lightbox is closed. |
window.addEventListener('opened.mdb.lightbox', () => alert('Lightbox opened'));
MDB UI KIT also works with module bundlers. Use the following code to import this component:
import { Lightbox } from 'mdb-ui-kit';