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.

        
            
          import React from 'react';
          import { MDBLightbox, MDBLightboxItem, MDBRow, MDBCol } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBLightbox>
                <MDBRow>
                  <MDBCol lg='4'>
                    <MDBLightboxItem
                      src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp'
                      fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/1.webp'
                      className='w-100'
                    />
                  </MDBCol>
                  <MDBCol lg='4'>
                    <MDBLightboxItem
                      src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp'
                      fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/2.webp'
                      className='w-100'
                    />
                  </MDBCol>
                  <MDBCol lg='4'>
                    <MDBLightboxItem
                      src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp'
                      fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/3.webp'
                      className='w-100'
                    />
                  </MDBCol>
                </MDBRow>
              </MDBLightbox>
            );
          }
          
        
    

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.

        
            
          import React from 'react';
          import { MDBLightboxItem } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBLightboxItem
                src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp'
                fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/1.webp'
                className='w-100'
              />
            );
          }
          
        
    

Shadows and rounded corners

You can improve the look of the images by adding shadows and rounded corners.

        
            
          import React from 'react';
          import { MDBLightbox, MDBLightboxItem, MDBRow, MDBCol } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBLightbox>
                <MDBRow>
                  <MDBCol lg='4'>
                    <MDBLightboxItem
                      src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp'
                      fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/1.webp'
                      className='w-100 shadow-1-strong rounded'
                    />
                  </MDBCol>
                  <MDBCol lg='4'>
                    <MDBLightboxItem
                      src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp'
                      fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/2.webp'
                      className='w-100 shadow-1-strong rounded'
                    />
                  </MDBCol>
                  <MDBCol lg='4'>
                    <MDBLightboxItem
                      src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp'
                      fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/3.webp'
                      className='w-100 shadow-1-strong rounded'
                    />
                  </MDBCol>
                </MDBRow>
              </MDBLightbox>
            );
          }
          
        
    

Different sizes

Loaded images can have any aspect ratio. Their size will be automatically adjusted to the window when you open the lightbox.

        
            
          import React from 'react';
          import { MDBLightbox, MDBLightboxItem, MDBRow, MDBCol } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBLightbox>
                <MDBRow>
                  <MDBCol lg='6'>
                    <MDBLightboxItem
                      src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp'
                      fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/1.webp'
                      className='w-100 mb-2 mb-md-4'
                    />
                    <MDBLightboxItem
                      src='https://mdbootstrap.com/img/Photos/Thumbnails/Square/1.webp'
                      fullscreenSrc='https://mdbootstrap.com/img/Photos/Square/1.webp'
                      className='w-100'
                    />
                  </MDBCol>
                  <MDBCol lg='6'>
                    <MDBLightboxItem
                      src='https://mdbootstrap.com/img/Photos/Thumbnails/Vertical/1.webp'
                      fullscreenSrc='https://mdbootstrap.com/img/Photos/Vertical/1.webp'
                      className='w-100'
                    />
                  </MDBCol>
                </MDBRow>
              </MDBLightbox>
            );
          }
          
        
    

Zoom level

The zoomLevel property allows you to define the size of a single zoom in / zoom out.

        
            
          import React from 'react';
          import { MDBLightbox, MDBLightboxItem, MDBRow, MDBCol } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBLightbox zoomLevel={0.25}>
                <MDBRow>
                  <MDBCol lg='4'>
                    <MDBLightboxItem
                      src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp'
                      fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/1.webp'
                      className='w-100'
                    />
                  </MDBCol>
                  <MDBCol lg='4'>
                    <MDBLightboxItem
                      src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp'
                      fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/2.webp'
                      className='w-100'
                    />
                  </MDBCol>
                  <MDBCol lg='4'>
                    <MDBLightboxItem
                      src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp'
                      fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/3.webp'
                      className='w-100'
                    />
                  </MDBCol>
                </MDBRow>
              </MDBLightbox>
            );
          }
          
        
    

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.

        
            
          import React from 'react';
          import { MDBLightbox, MDBLightboxItem, MDBRow, MDBCol } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBLightbox>
                <MDBRow>
                  <MDBCol lg='3'>
                    <MDBLightboxItem
                      src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp'
                      fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/1.webp'
                      className='w-100'
                    />
                  </MDBCol>
                  <MDBCol lg='3'>
                    <MDBLightboxItem
                      src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp'
                      fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/2.webp'
                      className='w-100'
                    />
                  </MDBCol>
                  <MDBCol lg='3'>
                    <MDBLightboxItem
                      disabled
                      src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp'
                      fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/3.webp'
                      className='w-100'
                    />
                  </MDBCol>
                  <MDBCol lg='3'>
                    <MDBLightboxItem
                      src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp'
                      fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/4.webp'
                      className='w-100'
                    />
                  </MDBCol>
                </MDBRow>
              </MDBLightbox>
            );
          }
          
        
    

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.

        
            
            import React from 'react';
            import { MDBLightbox, MDBLightboxItem, MDBRow, MDBCol } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBLightbox>
                  <MDBRow>
                    <MDBCol lg='4'>
                      <MDBLightboxItem
                        src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.jpg'
                        fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/1.jpg'
                        className='w-100'
                        alt='Table Full of Spieces'
                        caption='Image caption 1'
                      />
                    </MDBCol>
                    <MDBCol lg='4'>
                      <MDBLightboxItem
                        src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.jpg'
                        fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/2.jpg'
                        className='w-100'
                        alt='Winter Landscape'
                      />
                    </MDBCol>
                    <MDBCol lg='4'>
                      <MDBLightboxItem
                        src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.jpg'
                        fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/3.jpg'
                        className='w-100'
                        alt='View of the City in the Mountains'
                        caption=' '
                      />
                    </MDBCol>
                  </MDBRow>
                </MDBLightbox>
              );
            }
            
        
    

Outside access

        
            
          import React, { useRef } from 'react';
          import { MDBLightbox, MDBLightboxItem, MDBRow, MDBCol, MDBBtn } from 'mdb-react-ui-kit';
  
          export default function App() {
            const outsideClickRef = useRef(null);

            const handleOutsideClick = () => {
              outsideClickRef.current?.click();
            };
            
            return (
              <>
                <MDBLightbox>
                  <MDBRow>
                    <MDBCol lg='4'>
                      <MDBLightboxItem
                        src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp'
                        fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/1.webp'
                        className='w-100'
                        alt='Lightbox image 1'
                      />
                    </MDBCol>
                    <MDBCol lg='4'>
                      <MDBLightboxItem
                        src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp'
                        fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/2.webp'
                        className='w-100'
                        alt='Lightbox image 2'
                        ref={outsideClickRef}
                      />
                    </MDBCol>
                    <MDBCol lg='4'>
                      <MDBLightboxItem
                        src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp'
                        fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/3.webp'
                        className='w-100'
                        alt='Lightbox image 3'
                      />
                    </MDBCol>
                  </MDBRow>
                </MDBLightbox>
                <div className='text-center mt-3'>
                  <MDBBtn onClick={handleOutsideClick}>Open second image</MDBBtn>
                </div>
              </>
            );
          }
          
        
    

Lightbox - API


Import

        
            
        import { MDBLightbox, MDBLightboxItem } from 'mdb-react-ui-kit';
      
        
    

Properties

MDBLightbox

Name Type Default Description Example
className number 1 Defines zoom level while zooming in or out. <MDBLightbox className="class" />
fontAwesome String 'free' Defines version of Font Awesome library. Available options are 'free' and 'pro'. <MDBLightbox fontAwesome="pro" />
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.

        
            
              // .lightbox-gallery
              --#{$prefix}lightbox-zindex: #{$lightbox-zindex};
              --#{$prefix}lightbox-toolbar-zindex: #{$lightbox-toolbar-zindex};
              --#{$prefix}lightbox-gallery-background-color: #{$lightbox-gallery-background-color};
              --#{$prefix}lightbox-gallery-transition: #{$lightbox-gallery-transition};
              --#{$prefix}lightbox-gallery-toolbar-height: #{$lightbox-gallery-toolbar-height};
              --#{$prefix}lightbox-gallery-toolbar-transition: #{$lightbox-gallery-toolbar-transition};
              --#{$prefix}lightbox-gallery-toolbar-button-width: #{$lightbox-gallery-toolbar-button-width};
              --#{$prefix}lightbox-gallery-toolbar-button-height: #{$lightbox-gallery-toolbar-button-height};
              --#{$prefix}lightbox-gallery-toolbar-button-color: #{$lightbox-gallery-toolbar-button-color};
              --#{$prefix}lightbox-gallery-toolbar-button-transition: #{$lightbox-gallery-toolbar-button-transition};
              --#{$prefix}lightbox-gallery-toolbar-button-hover-color: #{$lightbox-gallery-toolbar-button-hover-color};
              --#{$prefix}lightbox-gallery-toolbar-button-before-font-weight: #{$lightbox-gallery-toolbar-button-before-font-weight};
              --#{$prefix}lightbox-gallery-content-top: #{$lightbox-gallery-content-top};
              --#{$prefix}lightbox-gallery-content-left: #{$lightbox-gallery-content-left};
              --#{$prefix}lightbox-gallery-content-width: #{$lightbox-gallery-content-width};
              --#{$prefix}lightbox-gallery-content-height: #{$lightbox-gallery-content-height};
              --#{$prefix}lightbox-gallery-arrow-width: #{$lightbox-gallery-arrow-width};
              --#{$prefix}lightbox-gallery-arrow-transition: #{$lightbox-gallery-arrow-transition};
              --#{$prefix}lightbox-gallery-arrow-button-width: #{$lightbox-gallery-arrow-button-width};
              --#{$prefix}lightbox-gallery-arrow-button-height: #{$lightbox-gallery-arrow-button-height};
              --#{$prefix}lightbox-gallery-arrow-button-color: #{$lightbox-gallery-arrow-button-color};
              --#{$prefix}lightbox-gallery-arrow-button-transition: #{$lightbox-gallery-arrow-button-transition};
              --#{$prefix}lightbox-gallery-arrow-button-hover-color: #{$lightbox-gallery-arrow-button-hover-color};
              --#{$prefix}lightbox-gallery-arrow-button-before-font-weight: #{$lightbox-gallery-arrow-button-before-font-weight};
              --#{$prefix}lightbox-gallery-button-focus-color: #{$lightbox-gallery-button-focus-color};
              --#{$prefix}lightbox-gallery-image-transform: #{$lightbox-gallery-image-transform};
              --#{$prefix}lightbox-gallery-image-transition: #{$lightbox-gallery-image-transition};
              --#{$prefix}lightbox-gallery-counter-color: #{$lightbox-gallery-counter-color};
              --#{$prefix}lightbox-gallery-counter-padding-x: #{$lightbox-gallery-counter-padding-x};
              --#{$prefix}lightbox-gallery-caption-color: #{$lightbox-gallery-caption-color};
              --#{$prefix}lightbox-gallery-caption-margin-x: #{$lightbox-gallery-caption-margin-x};
              --#{$prefix}lightbox-gallery-caption-wrapper-height: #{$lightbox-gallery-caption-wrapper-height};
              --#{$prefix}lightbox-gallery-loader-transition: #{$lightbox-gallery-loader-transition};

              // .disabled-scroll
              --#{$prefix}lightbox-disabled-scroll-media-padding-right: #{$lightbox-disabled-scroll-media-padding-right};
            
        
    

SCSS variables

        
            
              $lightbox-zindex: 1100;
              $lightbox-zindex-toolbar: 1110;

              $lightbox-gallery-background-color: rgba(0, 0, 0, 0.9);
              $lightbox-gallery-transition: all 0.3s ease-out;
              $lightbox-gallery-toolbar-height: 50px;
              $lightbox-gallery-toolbar-transition: opacity 0.4s;
              $lightbox-gallery-counter-color: #b3b3b3;
              $lightbox-gallery-counter-padding-x: 10px;
              $lightbox-gallery-toolbar-button-width: 50px;
              $lightbox-gallery-toolbar-button-height: 50px;
              $lightbox-gallery-toolbar-button-color: #b3b3b3;
              $lightbox-gallery-toolbar-button-transition: color 0.2s;
              $lightbox-gallery-toolbar-button-hover-color: $white;
              $lightbox-gallery-toolbar-button-before-font-weight: 900;
              $lightbox-gallery-content-top: 50px;
              $lightbox-gallery-content-left: $lightbox-gallery-content-top;
              $lightbox-gallery-content-width: calc(100% - 100px);
              $lightbox-gallery-content-height: $lightbox-gallery-content-width;
              $lightbox-gallery-image-transform: scale(0.25);
              $lightbox-gallery-image-transition: all 0.4s ease-out;
              $lightbox-gallery-arrow-width: 50px;
              $lightbox-gallery-arrow-transition: opacity 0.4s;
              $lightbox-gallery-arrow-button-width: 50px;
              $lightbox-gallery-arrow-button-height: 50px;
              $lightbox-gallery-arrow-button-color: #b3b3b3;
              $lightbox-gallery-arrow-button-transition: color 0.2s;
              $lightbox-gallery-arrow-button-hover-color: $white;
              $lightbox-gallery-arrow-button-before-font-weight: 900;
              $lightbox-gallery-caption-wrapper-height: 50px;
              $lightbox-gallery-caption-color: $white;
              $lightbox-gallery-caption-margin-x: 10px;
              $lightbox-gallery-loader-transition: opacity 1s;
              $lightbox-gallery-button-focus-color: $white;
              $lightbox-disabled-scroll-media-padding-right: 17px;