Lightbox
React Bootstrap 5 Lightbox component
Responsive lightbox built with the latest Bootstrap 5. 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
property allows you to define the size of a single zoom
in / zoom out.
Disabled image
By adding a disabled
property to any MDBLightboxItem
, 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. If it is not
set, the data is taken from the alt
property. When you want to disable caption,
leave the caption
empty.
Outside access
Lightbox - API
Import
Properties
MDBLightbox
Name | Type | Default | Description | Example |
---|---|---|---|---|
className
|
number | 1 |
Defines zoom level while zooming in or out. |
<MDBLightbox className="class" />
|
lightboxRef
|
Reference | '' |
A reference to the MDBLightbox |
<MDBLightbox lightboxRef={customRef} />
|
tag
|
String | 'span' |
Defines tag of the MDBLightbox element |
<MDBLightbox tag="section" />
|
zoomLevel
|
number | 1 |
Defines zoom level while zooming in or out. |
<MDBLightbox zoomLevel={0.5} />
|
disablePortal
|
Boolean | false |
When true, component will be rendered in standard DOM hierarchy. |
<MDBLightbox disablePortal />
|
MDBLightboxItem
Name | Type | Default | Description | Example |
---|---|---|---|---|
disabled
|
Boolean | '' |
Creates a disabled image in the lightbox |
<MDBLightboxItem disabled />
|
disabled
|
Boolean | '' |
Creates a disabled image in the lightbox |
<MDBLightboxItem disabled />
|
fullscreenSrc
|
String | '' |
Defines a fullscreen source for the item |
<MDBLightboxItem fullscreenSrc="..." />
|
src
|
String | '' |
Defines a thumbnail source for the item |
<MDBLightboxItem src="..." />
|
Events
Name | Type | Description |
---|---|---|
onClose
|
() => void | Fires after closing a lightbox. |
onOpen
|
() => void | Fires after opening a lightbox. |
onSlide
|
() => void | Fires after sliding an item. |
onZoomIn
|
() => void | Fires after zooming in an image. |
onZoomOut
|
() => void | Fires after zooming out an image. |
CSS variables
As part of MDB’s evolving CSS variables approach, lightbox now uses local CSS variables on
.lightbox-gallery
for enhanced real-time customization. Values for the CSS variables are
set via Sass, so Sass customization is still supported, too.