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.js
file of your react project and copy paste the below lines of code
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
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; |
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