Lightbox
Vue Lightbox component
Responsive lightbox built with the latest Bootstrap 5 and Vue 3. Lightbox is a responsive gallery with the option to enlarge selected photos.
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
Basic example
A basic example of a lightbox with the most common use case with the bootstrap grid.
Image optimization
To ensure the proper performance of the page, it is recommended to include thumbnails of images in the src attribute. Then in the fullScreenSrc property add the path to the image with higher resolution. If the fullScreenSrc property is omitted, the lightbox will display the same image as in the reduced size.
Shadows and rounded corners
You can improve the look of the images by adding shadows and rounded corners.
Different sizes
Loaded images can have any aspect ratio. Their size will be automatically adjusted to the window when you open the lightbox.
Zoom level
The zoomLevel attribute allows you to define the size of a single zoom in / zoom out.
Disabled image
By adding a disabled property to the MDBLightboxItem component, you can exclude it from your lightbox. In the example below, the third image has been disabled.
Captions
Image captions can be added using the caption property on MDBLightboxItem. If it is not set, the data is taken from the alt attribute.
Outside access
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.