Edit these docs

React Bootstrap Lightbox MDB Pro component

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%);
            }
Edit these docs

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


                        <MDBLightbox images=[
                                {src: 'link/to/image.webp', alt='...', md='3'}, 
                                {src: 'link/to/image2.webp', alt='...', md='3'}
                            ] ... />

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: 'https://mdbcdn.b-cdn.net/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: 'https://mdbcdn.b-cdn.net/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";