React.js LightGallery.js Example to Create Responsive Lightbox Image Gallery With Editor & Controls in Javascript

Welcome folks today in this blog post we will be using the lightgallery.js library to create responsive lightbox image gallery with editor and controls in react.js using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to create a new react project using the below command as shown below

ngx create-react-app sampleapp

cd sampleapp

And after that you need to install the below library using the below command as shown below

npm i lightgallery

And now you will see the below directory structure of the angular app as shown below

And after that you need to go to App.jsfile of your react project and copy paste the below lines of code

App.js

import React from "react";

import "lightgallery/css/lightgallery.css";
import "lightgallery/css/lg-zoom.css";
import "lightgallery/css/lg-thumbnail.css";
import "lightgallery/css/lg-autoplay.css";
import "lightgallery/css/lg-share.css";
import "lightgallery/css/lg-rotate.css";

// import plugins if you need
import lgThumbnail from "lightgallery/plugins/thumbnail";
import lgZoom from "lightgallery/plugins/zoom";
import lgAutoplay from "lightgallery/plugins/autoplay";
import lgVideo from "lightgallery/plugins/video";
import lgShare from "lightgallery/plugins/share";
import lgRotate from "lightgallery/plugins/rotate";

import LightGallery from "lightgallery/react/Lightgallery.es5";

function App() {
  return (
    <div className="App">
      <LightGallery
        speed={200}
        plugins={[lgThumbnail, lgZoom, lgShare, lgRotate, lgVideo, lgAutoplay]}
      >
        <a href="https://procodestore.com/wp-content/uploads/2021/03/164508084_271381191136191_654097929788476286_n.jpg">
          <img
            alt="img1"
            src="https://procodestore.com/wp-content/uploads/2021/03/164508084_271381191136191_654097929788476286_n.jpg"
          />
        </a>
        <a href="https://images.unsplash.com/photo-1661956602868-6ae368943878?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60">
          <img
            alt="img2"
            src="https://images.unsplash.com/photo-1661956602868-6ae368943878?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60"
          />
        </a>
        <a href="https://images.unsplash.com/photo-1679746584014-fb31d4eb0a5e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60">
          <img
            alt="img3"
            src="https://images.unsplash.com/photo-1679746584014-fb31d4eb0a5e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60"
          />
        </a>
        <a href="https://images.unsplash.com/photo-1679753700871-ef1eddfbfd3f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMnx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60">
          <img
            alt="img4"
            src="https://images.unsplash.com/photo-1679753700871-ef1eddfbfd3f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMnx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"
          />
        </a>
      </LightGallery>
    </div>
  );
}

export default App;

import React from "react";

import "lightgallery/css/lightgallery.css";

import "lightgallery/css/lg-zoom.css";

import "lightgallery/css/lg-thumbnail.css";

import "lightgallery/css/lg-autoplay.css";

import "lightgallery/css/lg-share.css";

import "lightgallery/css/lg-rotate.css";

// import plugins if you need

import lgThumbnail from "lightgallery/plugins/thumbnail";

import lgZoom from "lightgallery/plugins/zoom";

import lgAutoplay from "lightgallery/plugins/autoplay";

import lgVideo from "lightgallery/plugins/video";

import lgShare from "lightgallery/plugins/share";

import lgRotate from "lightgallery/plugins/rotate";

import LightGallery from "lightgallery/react/Lightgallery.es5";

function App() {

return (

<LightGallery

speed={200}

plugins={[lgThumbnail, lgZoom, lgShare, lgRotate, lgVideo, lgAutoplay]}

<img

alt="img1"

src="https://procodestore.com/wp-content/uploads/2021/03/164508084_271381191136191_654097929788476286_n.jpg"

</a>

<img

alt="img2"

src="https://images.unsplash.com/photo-1661956602868-6ae368943878?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60"

</a>

<img

alt="img3"

src="https://images.unsplash.com/photo-1679746584014-fb31d4eb0a5e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60"

</a>

<img

alt="img4"

src="https://images.unsplash.com/photo-1679753700871-ef1eddfbfd3f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMnx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"

</a>

</LightGallery>

</div>

);

}

export default App;

As you can see we are including the lightGalleryModule at the top all the css files we are importing for all the plugins that lightGallery.js library for rotating and zooming the image. And then we are listing out the images that needs to be included inside the gallery and then we are also attaching the speed of the transition of the animation inside the gallery. And second option it takes is the plugins which we are passing to add the functionalities to the image gallery as shown below

npm start