React Bootstrap Lightbox

React Lightbox - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

React Bootstrap lightbox is a group of images combined in one responsive gallery. Elements are grouped in thumbnail grid, which can be displayed as a slideshow.

Basic example 

        
            
            import React, { Component } from 'react';
            import { MDBLightbox } from 'mdbreact';
  
            class LightboxPage extends Component {
              state = {
                images: [
                  { src: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).webp', alt: 'My Image 1'},
                  { src: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(98).webp', alt: 'My Image 2'},
                  { src: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(131).webp', alt: 'My Image 3'},
                  { src: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(123).webp', alt: 'My Image 4'},
                  { src: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(118).webp', alt: 'My Image 5'},
                  { src: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(128).webp', alt: 'My Image 6'},
                  { src: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(132).webp', alt: 'My Image 7'},
                  { src: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(115).webp', alt: 'My Image 8'},
                  { src: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(133).webp', alt: 'My Image 9'}
                ]
              };
  
              render() {
                return <MDBLightbox md='4' images={this.state.images} />;
              }
            }
  
            export default LightboxPage;
          
        
    
        
            
            import React from "react";
            import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
            import Lightbox from "react-image-lightbox";
            import "./Lightbox.css";
  
            class LightboxPage extends React.Component {
              state = {
                photoIndex: 0,
                isOpen: false,
                images: [
                  'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).webp',
                  'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(98).webp',
                  'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(131).webp',
                  'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(123).webp',
                  'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(118).webp',
                  'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(128).webp',
                  'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(132).webp',
                  'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(115).webp',
                  'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(133).webp'
                ]
              }
  
              renderImages = () => {
                let photoIndex = -1;
                const { images } = this.state;
  
                return images.map(imageSrc => {
                  photoIndex++;
                  const privateKey = photoIndex;
  
                  return (
                    <MDBCol md="4" key={photoIndex}>
                      <figure>
                        <img src={imageSrc} alt="Gallery" className="img-fluid" onClick={()=>
                        this.setState({ photoIndex: privateKey, isOpen: true })
                        }
                        />
                      </figure>
                    </MDBCol>
                  );
                })
              }
  
              render() {
                const { photoIndex, isOpen, images } = this.state;
  
                return (
                  <MDBContainer className="mt-5">
                    <div className="mdb-lightbox no-margin">
                      <MDBRow>
                        {this.renderImages()}
                      </MDBRow>
                    </div>
                    {isOpen && (
                    <Lightbox
                      mainSrc={images[photoIndex]}
                      nextSrc={images[(photoIndex + 1) % images.length]}
                      prevSrc={images[(photoIndex + images.length - 1) % images.length]}
                      imageTitle={photoIndex + 1 + "/" + images.length}
                      onCloseRequest={() => this.setState({ isOpen: false })}
                      onMovePrevRequest={() =>
                        this.setState({
                          photoIndex: (photoIndex + images.length - 1) % images.length
                        })
                      }
                      onMoveNextRequest={() =>
                        this.setState({
                          photoIndex: (photoIndex + 1) % images.length
                        })
                        }
                      />
                    )}
                  </MDBContainer>
                );
              }
            }
  
            export default LightboxPage;
          
        
    
        
            
          @-webkit-keyframes closeWindow {
            0% {
              opacity: 1;
            }
            100% {
              opacity: 0;
            }
          }
  
          @keyframes closeWindow {
            0% {
              opacity: 1;
            }
            100% {
              opacity: 0;
            }
          }
  
          .ril__outer {
            background-color: rgba(0, 0, 0, 0.85);
            outline: none;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1000;
            width: 100%;
            height: 100%;
            -ms-content-zooming: none;
            -ms-user-select: none;
            -ms-touch-select: none;
            -ms-touch-action: none;
            touch-action: none;
          }
  
          .ril__outerClosing {
            opacity: 0;
          }
  
          .ril__inner {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
          }
  
          .ril__image,
          .ril__imagePrev,
          .ril__imageNext {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            max-width: none;
            -ms-content-zooming: none;
            -ms-user-select: none;
            -ms-touch-select: none;
            -ms-touch-action: none;
            touch-action: none;
          }
  
          .ril__imageDiscourager {
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
          }
  
          .ril__navButtons {
            border: none;
            position: absolute;
            top: 0;
            bottom: 0;
            width: 20px;
            height: 34px;
            padding: 40px 30px;
            margin: auto;
            cursor: pointer;
            opacity: 0.7;
          }
          .ril__navButtons:hover {
            opacity: 1;
          }
          .ril__navButtons:active {
            opacity: 0.7;
          }
  
          .ril__navButtonPrev {
            left: 0;
            background: rgba(0, 0, 0, 0.2)
              url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDE5LDMgLTIsLTIgLTE2LDE2IDE2LDE2IDEsLTEgLTE1LC0xNSAxNSwtMTUgeiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==")
              no-repeat center;
          }
  
          .ril__navButtonNext {
            right: 0;
            background: rgba(0, 0, 0, 0.2)
              url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDEsMyAyLC0yIDE2LDE2IC0xNiwxNiAtMSwtMSAxNSwtMTUgLTE1LC0xNSB6IiBmaWxsPSIjRkZGIi8+PC9zdmc+")
              no-repeat center;
          }
  
          .ril__downloadBlocker {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
            background-size: cover;
          }
  
          .ril__caption,
          .ril__toolbar {
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            left: 0;
            right: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
          }
  
          .ril__caption {
            bottom: 0;
            max-height: 150px;
            overflow: auto;
          }
  
          .ril__captionContent {
            padding: 10px 20px;
            color: #fff;
          }
  
          .ril__toolbar {
            top: 0;
            height: 50px;
          }
  
          .ril__toolbarSide {
            height: 50px;
            margin: 0;
          }
  
          .ril__toolbarLeftSide {
            padding-left: 20px;
            padding-right: 0;
            -webkit-box-flex: 0;
            -ms-flex: 0 1 auto;
            flex: 0 1 auto;
            overflow: hidden;
            text-overflow: ellipsis;
          }
  
          .ril__toolbarRightSide {
            padding-left: 0;
            padding-right: 20px;
            -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
            flex: 0 0 auto;
          }
  
          .ril__toolbarItem {
            display: inline-block;
            line-height: 50px;
            padding: 0;
            color: #fff;
            font-size: 120%;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
  
          .ril__toolbarItemChild {
            vertical-align: middle;
          }
  
          .ril__builtinButton {
            width: 40px;
            height: 35px;
            cursor: pointer;
            border: none;
            opacity: 0.7;
          }
          .ril__builtinButton:hover {
            opacity: 1;
          }
          .ril__builtinButton:active {
            outline: none;
          }
  
          .ril__builtinButtonDisabled {
            cursor: default;
            opacity: 0.5;
          }
          .ril__builtinButtonDisabled:hover {
            opacity: 0.5;
          }
  
          .ril__closeButton {
            background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48cGF0aCBkPSJtIDEsMyAxLjI1LC0xLjI1IDcuNSw3LjUgNy41LC03LjUgMS4yNSwxLjI1IC03LjUsNy41IDcuNSw3LjUgLTEuMjUsMS4yNSAtNy41LC03LjUgLTcuNSw3LjUgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=")
              no-repeat center;
          }
  
          .ril__zoomInButton {
            background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PHBhdGggZD0iTTEyIDV2NiIvPjwvZz48Y2lyY2xlIGN4PSIxMiIgY3k9IjgiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+")
              no-repeat center;
          }
  
          .ril__zoomOutButton {
            background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PC9nPjxjaXJjbGUgY3g9IjEyIiBjeT0iOCIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=")
              no-repeat center;
          }
  
          .ril__outerAnimating {
            -webkit-animation-name: closeWindow;
            animation-name: closeWindow;
          }
  
          @-webkit-keyframes pointFade {
            0%,
            19.999%,
            100% {
              opacity: 0;
            }
            20% {
              opacity: 1;
            }
          }
  
          @keyframes pointFade {
            0%,
            19.999%,
            100% {
              opacity: 0;
            }
            20% {
              opacity: 1;
            }
          }
  
          .ril__loadingCircle {
            width: 60px;
            height: 60px;
            position: relative;
          }
  
          .ril__loadingCirclePoint {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
          }
          .ril__loadingCirclePoint::before {
            content: "";
            display: block;
            margin: 0 auto;
            width: 11%;
            height: 30%;
            background-color: #fff;
            border-radius: 30%;
            -webkit-animation: pointFade 800ms infinite ease-in-out both;
            animation: pointFade 800ms infinite ease-in-out both;
          }
          .ril__loadingCirclePoint:nth-of-type(1) {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
          }
          .ril__loadingCirclePoint:nth-of-type(7) {
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
          }
          .ril__loadingCirclePoint:nth-of-type(1)::before,
          .ril__loadingCirclePoint:nth-of-type(7)::before {
            -webkit-animation-delay: -800ms;
            animation-delay: -800ms;
          }
          .ril__loadingCirclePoint:nth-of-type(2) {
            -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
          }
          .ril__loadingCirclePoint:nth-of-type(8) {
            -webkit-transform: rotate(210deg);
            transform: rotate(210deg);
          }
          .ril__loadingCirclePoint:nth-of-type(2)::before,
          .ril__loadingCirclePoint:nth-of-type(8)::before {
            -webkit-animation-delay: -666ms;
            animation-delay: -666ms;
          }
          .ril__loadingCirclePoint:nth-of-type(3) {
            -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
          }
          .ril__loadingCirclePoint:nth-of-type(9) {
            -webkit-transform: rotate(240deg);
            transform: rotate(240deg);
          }
          .ril__loadingCirclePoint:nth-of-type(3)::before,
          .ril__loadingCirclePoint:nth-of-type(9)::before {
            -webkit-animation-delay: -533ms;
            animation-delay: -533ms;
          }
          .ril__loadingCirclePoint:nth-of-type(4) {
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
          }
          .ril__loadingCirclePoint:nth-of-type(10) {
            -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
          }
          .ril__loadingCirclePoint:nth-of-type(4)::before,
          .ril__loadingCirclePoint:nth-of-type(10)::before {
            -webkit-animation-delay: -400ms;
            animation-delay: -400ms;
          }
          .ril__loadingCirclePoint:nth-of-type(5) {
            -webkit-transform: rotate(120deg);
            transform: rotate(120deg);
          }
          .ril__loadingCirclePoint:nth-of-type(11) {
            -webkit-transform: rotate(300deg);
            transform: rotate(300deg);
          }
          .ril__loadingCirclePoint:nth-of-type(5)::before,
          .ril__loadingCirclePoint:nth-of-type(11)::before {
            -webkit-animation-delay: -266ms;
            animation-delay: -266ms;
          }
          .ril__loadingCirclePoint:nth-of-type(6) {
            -webkit-transform: rotate(150deg);
            transform: rotate(150deg);
          }
          .ril__loadingCirclePoint:nth-of-type(12) {
            -webkit-transform: rotate(330deg);
            transform: rotate(330deg);
          }
          .ril__loadingCirclePoint:nth-of-type(6)::before,
          .ril__loadingCirclePoint:nth-of-type(12)::before {
            -webkit-animation-delay: -133ms;
            animation-delay: -133ms;
          }
          .ril__loadingCirclePoint:nth-of-type(7) {
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
          }
          .ril__loadingCirclePoint:nth-of-type(13) {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
          }
          .ril__loadingCirclePoint:nth-of-type(7)::before,
          .ril__loadingCirclePoint:nth-of-type(13)::before {
            -webkit-animation-delay: 0ms;
            animation-delay: 0ms;
          }
  
          .ril__loadingContainer {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
          }
          .ril__imagePrev .ril__loadingContainer,
          .ril__imageNext .ril__loadingContainer {
            display: none;
          }
  
          .ril__errorContainer {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            color: #fff;
          }
          .ril__imagePrev .ril__errorContainer,
          .ril__imageNext .ril__errorContainer {
            display: none;
          }
  
          .ril__loadingContainer__icon {
            color: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
          }

Projects presentation

My projects

All about my work

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. At ab ea a molestiae corrupti numquam quo beatae minima ratione magni accusantium repellat eveniet quia vitae.

| Lorem ipsum dolor sit amet

| Lorem ipsum dolor sit amet

| Lorem ipsum dolor sit amet

| Lorem ipsum dolor sit amet

| Lorem ipsum dolor sit amet

| Lorem ipsum dolor sit amet

| Lorem ipsum dolor sit amet

| Lorem ipsum dolor sit amet

more 
        
            
                  import React, { Component } from 'react';
                  import { MDBLightbox, MDBContainer } from 'mdbreact';
  
                  class LightboxPage extends Component {
                    state = {
                      presentation: [
                        {
                          src:'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(135).webp',
                          description: '| Lorem Ipsum Dolor Sit Amet'
                        },
                        {
                          src:'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(128).webp',
                          description: '| Lorem Ipsum Dolor Sit Amet'
                        },
                        {
                          src:'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(133).webp',
                          description: '| Lorem Ipsum Dolor Sit Amet'
                        },
                        {
                          src:'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(131).webp',
                          description: '| Lorem Ipsum Dolor Sit Amet'
                        },
                        {
                          src:'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(130).webp',
                          description: '| Lorem Ipsum Dolor Sit Amet'
                        },
                        {
                          src:'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(132).webp',
                          description: '| Lorem Ipsum Dolor Sit Amet'
                        },
                        {
                          src:'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(134).webp',
                          description: '| Lorem Ipsum Dolor Sit Amet'
                        },
                        {
                          src:'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(1).webp',
                          description: '| Lorem Ipsum Dolor Sit Amet'
                        }
                      ]
                    };
  
                    render() {
                      return (
                        <MDBContainer>
                          <h2 className='h1 text-center text-uppercase font-weight-bold mt-5 mb-3 mt-5'>
                            My projects
                          </h2>
                          <p className='text-center text-uppercase font-weight-bold'>
                            All about my work
                          </p>
                          <p className='section-description mt-5 pt-2'>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error
                            amet numquam iure provident voluptate esse quasi, veritatis totam
                            voluptas nostrum quisquam eum porro a pariatur accusamus veniam. At ab
                            ea a molestiae corrupti numquam quo beatae minima ratione magni
                            accusantium repellat eveniet quia vitae.
                          </p>
                          <MDBLightbox md='3' images={this.state.presentation} noMargins />
                        </MDBContainer>
                      );
                    }
                  }
  
                  export default LightboxPage;
                
        
    
        
            
                  import React from "react";
                  import { MDBContainer, MDBRow, MDBCol, MDBBtn } from "mdbreact";
                  import Lightbox from "react-image-lightbox";
                  import "./Lightbox.css";
  
                  class LightboxPage extends React.Component {
                    state = {
                      photoIndex: 0,
                      isOpen: false,
                      images: [
                        'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(135).webp',
                        'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(128).webp',
                        'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(133).webp',
                        'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(131).webp',
                        'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(130).webp',
                        'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(132).webp',
                        'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(134).webp',
                        'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(1).webp',
                      ]
                    }
  
                    renderImages = () => {
                      let photoIndex = -1;
                      const { images } = this.state;
  
                      return images.map(imageSrc => {
                        photoIndex++;
                        const privateKey = photoIndex;
  
                        return (
                          <MDBCol md="3" key={photoIndex}>
                            <figure>
                              <img
                                src={imageSrc}
                                alt="Gallery"
                                className="img-fluid z-depth-1"
                                onClick={() =>
                                  this.setState({ photoIndex: privateKey, isOpen: true })
                                }
                              />
                            </figure>
                          </MDBCol>
                        );
                      })
                    }
  
                    render() {
                      const { photoIndex, isOpen, images } = this.state;
  
                      return (
                        <MDBContainer className="mt-5 p-3" style={{ backgroundColor: "#fff" }}>
                          <h2 class="h1 text-center text-uppercase font-weight-bold pt-5 mb-3 mt-5">My projects</h2>
                          <p class="text-center text-uppercase font-weight-bold">All about my work</p>
                          <p class="section-description mt-5 pt-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error
                            amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a
                            pariatur accusamus veniam. At ab ea a molestiae corrupti numquam quo beatae minima ratione magni accusantium
                            repellat eveniet quia vitae.</p>
                          <div className="mdb-lightbox p-3">
                            <MDBRow>
                              {this.renderImages()}
                            </MDBRow>
                          </div>
                          {isOpen && (
                            <Lightbox
                              mainSrc={images[photoIndex]}
                              nextSrc={images[(photoIndex + 1) % images.length]}
                              prevSrc={images[(photoIndex + images.length - 1) % images.length]}
                              imageTitle={photoIndex + 1 + "/" + images.length}
                              onCloseRequest={() => this.setState({ isOpen: false })}
                              onMovePrevRequest={() =>
                                this.setState({
                                  photoIndex: (photoIndex + images.length - 1) % images.length
                                })
                              }
                              onMoveNextRequest={() =>
                                this.setState({
                                  photoIndex: (photoIndex + 1) % images.length
                                })
                              }
                            />
                          )}
                          <MDBCol md="12" className="text-center py-4">
                            <MDBBtn outline color="black"><strong>more</strong></MDBBtn>
                          </MDBCol>
                        </MDBContainer>
                      );
                    }
                  }
  
                  export default LightboxPage;
                
        
    
        
            
                @-webkit-keyframes closeWindow {
                  0% {
                    opacity: 1;
                  }
                  100% {
                    opacity: 0;
                  }
                }
  
                @keyframes closeWindow {
                  0% {
                    opacity: 1;
                  }
                  100% {
                    opacity: 0;
                  }
                }
  
                .ril__outer {
                  background-color: rgba(0, 0, 0, 0.85);
                  outline: none;
                  top: 0;
                  left: 0;
                  right: 0;
                  bottom: 0;
                  z-index: 1000;
                  width: 100%;
                  height: 100%;
                  -ms-content-zooming: none;
                  -ms-user-select: none;
                  -ms-touch-select: none;
                  -ms-touch-action: none;
                  touch-action: none;
                }
  
                .ril__outerClosing {
                  opacity: 0;
                }
  
                .ril__inner {
                  position: absolute;
                  top: 0;
                  left: 0;
                  right: 0;
                  bottom: 0;
                }
  
                .ril__image,
                .ril__imagePrev,
                .ril__imageNext {
                  position: absolute;
                  top: 0;
                  right: 0;
                  bottom: 0;
                  left: 0;
                  margin: auto;
                  max-width: none;
                  -ms-content-zooming: none;
                  -ms-user-select: none;
                  -ms-touch-select: none;
                  -ms-touch-action: none;
                  touch-action: none;
                }
  
                .ril__imageDiscourager {
                  background-repeat: no-repeat;
                  background-position: center;
                  background-size: contain;
                }
  
                .ril__navButtons {
                  border: none;
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  width: 20px;
                  height: 34px;
                  padding: 40px 30px;
                  margin: auto;
                  cursor: pointer;
                  opacity: 0.7;
                }
                .ril__navButtons:hover {
                  opacity: 1;
                }
                .ril__navButtons:active {
                  opacity: 0.7;
                }
  
                .ril__navButtonPrev {
                  left: 0;
                  background: rgba(0, 0, 0, 0.2)
                    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDE5LDMgLTIsLTIgLTE2LDE2IDE2LDE2IDEsLTEgLTE1LC0xNSAxNSwtMTUgeiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==")
                    no-repeat center;
                }
  
                .ril__navButtonNext {
                  right: 0;
                  background: rgba(0, 0, 0, 0.2)
                    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDEsMyAyLC0yIDE2LDE2IC0xNiwxNiAtMSwtMSAxNSwtMTUgLTE1LC0xNSB6IiBmaWxsPSIjRkZGIi8+PC9zdmc+")
                    no-repeat center;
                }
  
                .ril__downloadBlocker {
                  position: absolute;
                  top: 0;
                  left: 0;
                  right: 0;
                  bottom: 0;
                  background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
                  background-size: cover;
                }
  
                .ril__caption,
                .ril__toolbar {
                  background-color: rgba(0, 0, 0, 0.5);
                  position: absolute;
                  left: 0;
                  right: 0;
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex;
                  -webkit-box-pack: justify;
                  -ms-flex-pack: justify;
                  justify-content: space-between;
                }
  
                .ril__caption {
                  bottom: 0;
                  max-height: 150px;
                  overflow: auto;
                }
  
                .ril__captionContent {
                  padding: 10px 20px;
                  color: #fff;
                }
  
                .ril__toolbar {
                  top: 0;
                  height: 50px;
                }
  
                .ril__toolbarSide {
                  height: 50px;
                  margin: 0;
                }
  
                .ril__toolbarLeftSide {
                  padding-left: 20px;
                  padding-right: 0;
                  -webkit-box-flex: 0;
                  -ms-flex: 0 1 auto;
                  flex: 0 1 auto;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
  
                .ril__toolbarRightSide {
                  padding-left: 0;
                  padding-right: 20px;
                  -webkit-box-flex: 0;
                  -ms-flex: 0 0 auto;
                  flex: 0 0 auto;
                }
  
                .ril__toolbarItem {
                  display: inline-block;
                  line-height: 50px;
                  padding: 0;
                  color: #fff;
                  font-size: 120%;
                  max-width: 100%;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
  
                .ril__toolbarItemChild {
                  vertical-align: middle;
                }
  
                .ril__builtinButton {
                  width: 40px;
                  height: 35px;
                  cursor: pointer;
                  border: none;
                  opacity: 0.7;
                }
                .ril__builtinButton:hover {
                  opacity: 1;
                }
                .ril__builtinButton:active {
                  outline: none;
                }
  
                .ril__builtinButtonDisabled {
                  cursor: default;
                  opacity: 0.5;
                }
                .ril__builtinButtonDisabled:hover {
                  opacity: 0.5;
                }
  
                .ril__closeButton {
                  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48cGF0aCBkPSJtIDEsMyAxLjI1LC0xLjI1IDcuNSw3LjUgNy41LC03LjUgMS4yNSwxLjI1IC03LjUsNy41IDcuNSw3LjUgLTEuMjUsMS4yNSAtNy41LC03LjUgLTcuNSw3LjUgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=")
                    no-repeat center;
                }
  
                .ril__zoomInButton {
                  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PHBhdGggZD0iTTEyIDV2NiIvPjwvZz48Y2lyY2xlIGN4PSIxMiIgY3k9IjgiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+")
                    no-repeat center;
                }
  
                .ril__zoomOutButton {
                  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PC9nPjxjaXJjbGUgY3g9IjEyIiBjeT0iOCIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=")
                    no-repeat center;
                }
  
                .ril__outerAnimating {
                  -webkit-animation-name: closeWindow;
                  animation-name: closeWindow;
                }
  
                @-webkit-keyframes pointFade {
                  0%,
                  19.999%,
                  100% {
                    opacity: 0;
                  }
                  20% {
                    opacity: 1;
                  }
                }
  
                @keyframes pointFade {
                  0%,
                  19.999%,
                  100% {
                    opacity: 0;
                  }
                  20% {
                    opacity: 1;
                  }
                }
  
                .ril__loadingCircle {
                  width: 60px;
                  height: 60px;
                  position: relative;
                }
  
                .ril__loadingCirclePoint {
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  left: 0;
                  top: 0;
                }
                .ril__loadingCirclePoint::before {
                  content: "";
                  display: block;
                  margin: 0 auto;
                  width: 11%;
                  height: 30%;
                  background-color: #fff;
                  border-radius: 30%;
                  -webkit-animation: pointFade 800ms infinite ease-in-out both;
                  animation: pointFade 800ms infinite ease-in-out both;
                }
                .ril__loadingCirclePoint:nth-of-type(1) {
                  -webkit-transform: rotate(0deg);
                  transform: rotate(0deg);
                }
                .ril__loadingCirclePoint:nth-of-type(7) {
                  -webkit-transform: rotate(180deg);
                  transform: rotate(180deg);
                }
                .ril__loadingCirclePoint:nth-of-type(1)::before,
                .ril__loadingCirclePoint:nth-of-type(7)::before {
                  -webkit-animation-delay: -800ms;
                  animation-delay: -800ms;
                }
                .ril__loadingCirclePoint:nth-of-type(2) {
                  -webkit-transform: rotate(30deg);
                  transform: rotate(30deg);
                }
                .ril__loadingCirclePoint:nth-of-type(8) {
                  -webkit-transform: rotate(210deg);
                  transform: rotate(210deg);
                }
                .ril__loadingCirclePoint:nth-of-type(2)::before,
                .ril__loadingCirclePoint:nth-of-type(8)::before {
                  -webkit-animation-delay: -666ms;
                  animation-delay: -666ms;
                }
                .ril__loadingCirclePoint:nth-of-type(3) {
                  -webkit-transform: rotate(60deg);
                  transform: rotate(60deg);
                }
                .ril__loadingCirclePoint:nth-of-type(9) {
                  -webkit-transform: rotate(240deg);
                  transform: rotate(240deg);
                }
                .ril__loadingCirclePoint:nth-of-type(3)::before,
                .ril__loadingCirclePoint:nth-of-type(9)::before {
                  -webkit-animation-delay: -533ms;
                  animation-delay: -533ms;
                }
                .ril__loadingCirclePoint:nth-of-type(4) {
                  -webkit-transform: rotate(90deg);
                  transform: rotate(90deg);
                }
                .ril__loadingCirclePoint:nth-of-type(10) {
                  -webkit-transform: rotate(270deg);
                  transform: rotate(270deg);
                }
                .ril__loadingCirclePoint:nth-of-type(4)::before,
                .ril__loadingCirclePoint:nth-of-type(10)::before {
                  -webkit-animation-delay: -400ms;
                  animation-delay: -400ms;
                }
                .ril__loadingCirclePoint:nth-of-type(5) {
                  -webkit-transform: rotate(120deg);
                  transform: rotate(120deg);
                }
                .ril__loadingCirclePoint:nth-of-type(11) {
                  -webkit-transform: rotate(300deg);
                  transform: rotate(300deg);
                }
                .ril__loadingCirclePoint:nth-of-type(5)::before,
                .ril__loadingCirclePoint:nth-of-type(11)::before {
                  -webkit-animation-delay: -266ms;
                  animation-delay: -266ms;
                }
                .ril__loadingCirclePoint:nth-of-type(6) {
                  -webkit-transform: rotate(150deg);
                  transform: rotate(150deg);
                }
                .ril__loadingCirclePoint:nth-of-type(12) {
                  -webkit-transform: rotate(330deg);
                  transform: rotate(330deg);
                }
                .ril__loadingCirclePoint:nth-of-type(6)::before,
                .ril__loadingCirclePoint:nth-of-type(12)::before {
                  -webkit-animation-delay: -133ms;
                  animation-delay: -133ms;
                }
                .ril__loadingCirclePoint:nth-of-type(7) {
                  -webkit-transform: rotate(180deg);
                  transform: rotate(180deg);
                }
                .ril__loadingCirclePoint:nth-of-type(13) {
                  -webkit-transform: rotate(360deg);
                  transform: rotate(360deg);
                }
                .ril__loadingCirclePoint:nth-of-type(7)::before,
                .ril__loadingCirclePoint:nth-of-type(13)::before {
                  -webkit-animation-delay: 0ms;
                  animation-delay: 0ms;
                }
  
                .ril__loadingContainer {
                  position: absolute;
                  top: 0;
                  right: 0;
                  bottom: 0;
                  left: 0;
                }
                .ril__imagePrev .ril__loadingContainer,
                .ril__imageNext .ril__loadingContainer {
                  display: none;
                }
  
                .ril__errorContainer {
                  position: absolute;
                  top: 0;
                  right: 0;
                  bottom: 0;
                  left: 0;
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex;
                  -webkit-box-align: center;
                  -ms-flex-align: center;
                  align-items: center;
                  -webkit-box-pack: center;
                  -ms-flex-pack: center;
                  justify-content: center;
                  color: #fff;
                }
                .ril__imagePrev .ril__errorContainer,
                .ril__imageNext .ril__errorContainer {
                  display: none;
                }
  
                .ril__loadingContainer__icon {
                  color: #fff;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  -webkit-transform: translateX(-50%) translateY(-50%);
                  transform: translateX(-50%) translateY(-50%);
                }

Gallery with mixed content 

        
            
                import { MDBLightbox } from 'mdbreact';
                import React, { Component } from 'react';
  
                class LightboxPage extends Component {
                  state = {
                    mixed: [
                      { src: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(58).webp', md: '3' },
                      { src: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(61).webp', md: '3' },
                      { src: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(62).webp', md: '3' },
                      { src: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(60).webp', md: '3' },
                      { src: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(66).webp', md: '4' },
                      { src: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(70).webp', md: '4' },
                      { src: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(74).webp', md: '4' },
                      { src: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(64).webp', md: '3' },
                      { src: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(77).webp', md: '3' },
                      { src: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(78).webp', md: '3' },
                      { src: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(76).webp', md: '3' }
                    ]
                  };
  
                  render() {
                    return <MDBLightbox images={this.state.mixed} noMargins />;
                  }
                }
  
                export default LightboxPage;
                
        
    
        
            
                  import React from "react";
                  import { MDBContainer, MDBRow, MDBCol, MDBBtn } from "mdbreact";
                  import Lightbox from "react-image-lightbox";
                  import "./Lightbox.css";
  
                  class LightboxPage extends React.Component {
                    state = {
                      photoIndex: 0,
                      isOpen: false,
                      images: [
                        'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(58).webp',
                        'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(61).webp',
                        'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(62).webp',
                        'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(60).webp',
                        'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(66).webp',
                        'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(70).webp',
                        'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(74).webp',
                        'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(64).webp',
                        'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(77).webp',
                        'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(78).webp',
                        'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(76).webp',
                      ],
                      colWidth: [3, 3, 3, 3, 4, 4, 4, 3, 3, 3, 3]
                    }
  
                    renderImages = () => {
                      let photoIndex = -1;
                      const { images } = this.state;
  
                      return images.map((imageSrc, index) => {
                        photoIndex++;
                        const privateKey = photoIndex;
                        return (
                          <MDBCol md={this.state.colWidth[index]} key={photoIndex}>
                            <figure>
                              <img
                                src={imageSrc}
                                alt="Gallery"
                                className="img-fluid z-depth-1"
                                onClick={() =>
                                  this.setState({ photoIndex: privateKey, isOpen: true })
                                }
                              />
                            </figure>
                          </MDBCol>
                        );
                      })
                    }
  
                    render() {
                      const { photoIndex, isOpen, images } = this.state;
                      return (
                        <MDBContainer className="mt-5 p-3" >
                          <div className="mdb-lightbox p-3">
                            <MDBRow>
                              {this.renderImages()}
                            </MDBRow>
                          </div>
                          {isOpen && (
                            <Lightbox
                              mainSrc={images[photoIndex]}
                              nextSrc={images[(photoIndex + 1) % images.length]}
                              prevSrc={images[(photoIndex + images.length - 1) % images.length]}
                              imageTitle={photoIndex + 1 + "/" + images.length}
                              onCloseRequest={() => this.setState({ isOpen: false })}
                              onMovePrevRequest={() =>
                                this.setState({
                                  photoIndex: (photoIndex + images.length - 1) % images.length
                                })
                              }
                              onMoveNextRequest={() =>
                                this.setState({
                                  photoIndex: (photoIndex + 1) % images.length
                                })
                              }
                            />
                          )}
                          <MDBCol md="12" className="text-center py-4">
                            <MDBBtn outline color="black"><strong>more</strong></MDBBtn>
                          </MDBCol>
                        </MDBContainer >
                      );
                    }
                  }
  
                  export default LightboxPage;
                
        
    
        
            
                @-webkit-keyframes closeWindow {
                  0% {
                    opacity: 1;
                  }
                  100% {
                    opacity: 0;
                  }
                }
  
                @keyframes closeWindow {
                  0% {
                    opacity: 1;
                  }
                  100% {
                    opacity: 0;
                  }
                }
  
                .ril__outer {
                  background-color: rgba(0, 0, 0, 0.85);
                  outline: none;
                  top: 0;
                  left: 0;
                  right: 0;
                  bottom: 0;
                  z-index: 1000;
                  width: 100%;
                  height: 100%;
                  -ms-content-zooming: none;
                  -ms-user-select: none;
                  -ms-touch-select: none;
                  -ms-touch-action: none;
                  touch-action: none;
                }
  
                .ril__outerClosing {
                  opacity: 0;
                }
  
                .ril__inner {
                  position: absolute;
                  top: 0;
                  left: 0;
                  right: 0;
                  bottom: 0;
                }
  
                .ril__image,
                .ril__imagePrev,
                .ril__imageNext {
                  position: absolute;
                  top: 0;
                  right: 0;
                  bottom: 0;
                  left: 0;
                  margin: auto;
                  max-width: none;
                  -ms-content-zooming: none;
                  -ms-user-select: none;
                  -ms-touch-select: none;
                  -ms-touch-action: none;
                  touch-action: none;
                }
  
                .ril__imageDiscourager {
                  background-repeat: no-repeat;
                  background-position: center;
                  background-size: contain;
                }
  
                .ril__navButtons {
                  border: none;
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  width: 20px;
                  height: 34px;
                  padding: 40px 30px;
                  margin: auto;
                  cursor: pointer;
                  opacity: 0.7;
                }
                .ril__navButtons:hover {
                  opacity: 1;
                }
                .ril__navButtons:active {
                  opacity: 0.7;
                }
  
                .ril__navButtonPrev {
                  left: 0;
                  background: rgba(0, 0, 0, 0.2)
                    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDE5LDMgLTIsLTIgLTE2LDE2IDE2LDE2IDEsLTEgLTE1LC0xNSAxNSwtMTUgeiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==")
                    no-repeat center;
                }
  
                .ril__navButtonNext {
                  right: 0;
                  background: rgba(0, 0, 0, 0.2)
                    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDEsMyAyLC0yIDE2LDE2IC0xNiwxNiAtMSwtMSAxNSwtMTUgLTE1LC0xNSB6IiBmaWxsPSIjRkZGIi8+PC9zdmc+")
                    no-repeat center;
                }
  
                .ril__downloadBlocker {
                  position: absolute;
                  top: 0;
                  left: 0;
                  right: 0;
                  bottom: 0;
                  background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
                  background-size: cover;
                }
  
                .ril__caption,
                .ril__toolbar {
                  background-color: rgba(0, 0, 0, 0.5);
                  position: absolute;
                  left: 0;
                  right: 0;
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex;
                  -webkit-box-pack: justify;
                  -ms-flex-pack: justify;
                  justify-content: space-between;
                }
  
                .ril__caption {
                  bottom: 0;
                  max-height: 150px;
                  overflow: auto;
                }
  
                .ril__captionContent {
                  padding: 10px 20px;
                  color: #fff;
                }
  
                .ril__toolbar {
                  top: 0;
                  height: 50px;
                }
  
                .ril__toolbarSide {
                  height: 50px;
                  margin: 0;
                }
  
                .ril__toolbarLeftSide {
                  padding-left: 20px;
                  padding-right: 0;
                  -webkit-box-flex: 0;
                  -ms-flex: 0 1 auto;
                  flex: 0 1 auto;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
  
                .ril__toolbarRightSide {
                  padding-left: 0;
                  padding-right: 20px;
                  -webkit-box-flex: 0;
                  -ms-flex: 0 0 auto;
                  flex: 0 0 auto;
                }
  
                .ril__toolbarItem {
                  display: inline-block;
                  line-height: 50px;
                  padding: 0;
                  color: #fff;
                  font-size: 120%;
                  max-width: 100%;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
  
                .ril__toolbarItemChild {
                  vertical-align: middle;
                }
  
                .ril__builtinButton {
                  width: 40px;
                  height: 35px;
                  cursor: pointer;
                  border: none;
                  opacity: 0.7;
                }
                .ril__builtinButton:hover {
                  opacity: 1;
                }
                .ril__builtinButton:active {
                  outline: none;
                }
  
                .ril__builtinButtonDisabled {
                  cursor: default;
                  opacity: 0.5;
                }
                .ril__builtinButtonDisabled:hover {
                  opacity: 0.5;
                }
  
                .ril__closeButton {
                  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48cGF0aCBkPSJtIDEsMyAxLjI1LC0xLjI1IDcuNSw3LjUgNy41LC03LjUgMS4yNSwxLjI1IC03LjUsNy41IDcuNSw3LjUgLTEuMjUsMS4yNSAtNy41LC03LjUgLTcuNSw3LjUgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=")
                    no-repeat center;
                }
  
                .ril__zoomInButton {
                  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PHBhdGggZD0iTTEyIDV2NiIvPjwvZz48Y2lyY2xlIGN4PSIxMiIgY3k9IjgiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+")
                    no-repeat center;
                }
  
                .ril__zoomOutButton {
                  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PC9nPjxjaXJjbGUgY3g9IjEyIiBjeT0iOCIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=")
                    no-repeat center;
                }
  
                .ril__outerAnimating {
                  -webkit-animation-name: closeWindow;
                  animation-name: closeWindow;
                }
  
                @-webkit-keyframes pointFade {
                  0%,
                  19.999%,
                  100% {
                    opacity: 0;
                  }
                  20% {
                    opacity: 1;
                  }
                }
  
                @keyframes pointFade {
                  0%,
                  19.999%,
                  100% {
                    opacity: 0;
                  }
                  20% {
                    opacity: 1;
                  }
                }
  
                .ril__loadingCircle {
                  width: 60px;
                  height: 60px;
                  position: relative;
                }
  
                .ril__loadingCirclePoint {
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  left: 0;
                  top: 0;
                }
                .ril__loadingCirclePoint::before {
                  content: "";
                  display: block;
                  margin: 0 auto;
                  width: 11%;
                  height: 30%;
                  background-color: #fff;
                  border-radius: 30%;
                  -webkit-animation: pointFade 800ms infinite ease-in-out both;
                  animation: pointFade 800ms infinite ease-in-out both;
                }
                .ril__loadingCirclePoint:nth-of-type(1) {
                  -webkit-transform: rotate(0deg);
                  transform: rotate(0deg);
                }
                .ril__loadingCirclePoint:nth-of-type(7) {
                  -webkit-transform: rotate(180deg);
                  transform: rotate(180deg);
                }
                .ril__loadingCirclePoint:nth-of-type(1)::before,
                .ril__loadingCirclePoint:nth-of-type(7)::before {
                  -webkit-animation-delay: -800ms;
                  animation-delay: -800ms;
                }
                .ril__loadingCirclePoint:nth-of-type(2) {
                  -webkit-transform: rotate(30deg);
                  transform: rotate(30deg);
                }
                .ril__loadingCirclePoint:nth-of-type(8) {
                  -webkit-transform: rotate(210deg);
                  transform: rotate(210deg);
                }
                .ril__loadingCirclePoint:nth-of-type(2)::before,
                .ril__loadingCirclePoint:nth-of-type(8)::before {
                  -webkit-animation-delay: -666ms;
                  animation-delay: -666ms;
                }
                .ril__loadingCirclePoint:nth-of-type(3) {
                  -webkit-transform: rotate(60deg);
                  transform: rotate(60deg);
                }
                .ril__loadingCirclePoint:nth-of-type(9) {
                  -webkit-transform: rotate(240deg);
                  transform: rotate(240deg);
                }
                .ril__loadingCirclePoint:nth-of-type(3)::before,
                .ril__loadingCirclePoint:nth-of-type(9)::before {
                  -webkit-animation-delay: -533ms;
                  animation-delay: -533ms;
                }
                .ril__loadingCirclePoint:nth-of-type(4) {
                  -webkit-transform: rotate(90deg);
                  transform: rotate(90deg);
                }
                .ril__loadingCirclePoint:nth-of-type(10) {
                  -webkit-transform: rotate(270deg);
                  transform: rotate(270deg);
                }
                .ril__loadingCirclePoint:nth-of-type(4)::before,
                .ril__loadingCirclePoint:nth-of-type(10)::before {
                  -webkit-animation-delay: -400ms;
                  animation-delay: -400ms;
                }
                .ril__loadingCirclePoint:nth-of-type(5) {
                  -webkit-transform: rotate(120deg);
                  transform: rotate(120deg);
                }
                .ril__loadingCirclePoint:nth-of-type(11) {
                  -webkit-transform: rotate(300deg);
                  transform: rotate(300deg);
                }
                .ril__loadingCirclePoint:nth-of-type(5)::before,
                .ril__loadingCirclePoint:nth-of-type(11)::before {
                  -webkit-animation-delay: -266ms;
                  animation-delay: -266ms;
                }
                .ril__loadingCirclePoint:nth-of-type(6) {
                  -webkit-transform: rotate(150deg);
                  transform: rotate(150deg);
                }
                .ril__loadingCirclePoint:nth-of-type(12) {
                  -webkit-transform: rotate(330deg);
                  transform: rotate(330deg);
                }
                .ril__loadingCirclePoint:nth-of-type(6)::before,
                .ril__loadingCirclePoint:nth-of-type(12)::before {
                  -webkit-animation-delay: -133ms;
                  animation-delay: -133ms;
                }
                .ril__loadingCirclePoint:nth-of-type(7) {
                  -webkit-transform: rotate(180deg);
                  transform: rotate(180deg);
                }
                .ril__loadingCirclePoint:nth-of-type(13) {
                  -webkit-transform: rotate(360deg);
                  transform: rotate(360deg);
                }
                .ril__loadingCirclePoint:nth-of-type(7)::before,
                .ril__loadingCirclePoint:nth-of-type(13)::before {
                  -webkit-animation-delay: 0ms;
                  animation-delay: 0ms;
                }
  
                .ril__loadingContainer {
                  position: absolute;
                  top: 0;
                  right: 0;
                  bottom: 0;
                  left: 0;
                }
                .ril__imagePrev .ril__loadingContainer,
                .ril__imageNext .ril__loadingContainer {
                  display: none;
                }
  
                .ril__errorContainer {
                  position: absolute;
                  top: 0;
                  right: 0;
                  bottom: 0;
                  left: 0;
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex;
                  -webkit-box-align: center;
                  -ms-flex-align: center;
                  align-items: center;
                  -webkit-box-pack: center;
                  -ms-flex-pack: center;
                  justify-content: center;
                  color: #fff;
                }
                .ril__imagePrev .ril__errorContainer,
                .ril__imageNext .ril__errorContainer {
  
                  display: none;
                }
  
                .ril__loadingContainer__icon {
                  color: #fff;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  -webkit-transform: translateX(-50%) translateY(-50%);
                  transform: translateX(-50%) translateY(-50%);
                }

React Lightbox - API

In this section you will find advanced information about the LightBox component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

MDBLightbox import statement

In order to use MDBLightbox component make sure you have imported proper module first.

        
            
              import { MDBLightbox } from "mdbreact";

MDBLightbox

The table below shows the configuration options of the MDBLightbox component.

Name Type Default Description Example
images Array [] Imports images to component <MDBLightbox images=[{src: 'link/to/image.webp'}] ... />
itemClassName String Adds custom classes for images <MDBLightbox itemClassName='my-5' ... />
noMargins Boolean false Removes default margin between images <MDBLightbox noMargins ... />
marginSpace Number 150 Defines margin in the Y axis of the image if you opened image <MDBLightbox marginSpace={0} ... />
lg, md, sm, size, xl, xs String Defines the size width of images <MDBLightbox size='1' xs='1' sm='2' md='4' lg='3' xl='2' ... />
transition Number 400 Sets transition time in ms <MDBLightbox transition={1000} ... />

MDBLightbox object property

To sets your data you have to import object to images property

The table below shows the configuration options object of images.

Name Type Default Description Example
alt String image NR Sets custom alt attribute to specific image {src: 'src/img.webp' , alt='My alternative text'}
description String Adds description under image in gallery view <{src: '/img.webp', description: 'Lightbox Project'}/>
src String Imports your image to component {src: 'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).webp'}
xs, sm, md, lg, xl, size String Defines the size width of image {src: '/img.webp', size: '6' , md; '3', lg: '2'}

Lightbox import statement

In order to use LightBox component make sure you have imported proper module first.

        
            
              import Lightbox from "react-image-lightbox";