Create a flexible lightbox popup gallery component for your React project. It’s simple and responsive to make your website beautiful!
Features:
- Image Zoom
- Keyboard shortcuts (with rate-limiting)
- Flexible rendering using src values assigned on the fly
- Image preloading for smoother viewing
- Mobile friendly, with pinch to zoom and swipe
npm install react-image-lightbox
// Or if you're using yarn
yarn add react-image-lightboxCreate a component Gallery.js
Note: Use the image path from your local folder
import React, { Component } from 'react';
import Lightbox from 'react-image-lightbox';
import 'react-image-lightbox/style.css';
import Link from 'next/link';
const images = [
require('../images/gallery1.jpg'),
require('../images/gallery2.jpg'),
require('../images/gallery3.jpg'),
require('../images/gallery4.jpg'),
require('../images/gallery5.jpg'),
require('../images/gallery6.jpg'),
require('../images/gallery7.jpg'),
require('../images/gallery8.jpg'),
require('../images/gallery9.jpg')
]
class Gallery extends Component {
state = {
photoIndex: 0,
isOpenImage: false
}
render() {
const { photoIndex, isOpenImage } = this.state;
return (
<section className="gallery-area">
<div className="container">
<div className="row">
<div className="col-lg-4 col-md-6">
<div className="single-image">
<img src={require('../images/gallery1.jpg')} alt="gallery" />
<Link href="#popup">
<a
className="popup-btn"
onClick={e => {e.preventDefault(); this.setState({ isOpenImage: true, photoIndex: 0 })}}
>
View
</a>
</Link>
</div>
</div>
<div className="col-lg-4 col-md-6">
<div className="single-image">
<img src={require('../images/gallery2.jpg')} alt="gallery" />
<Link href="#popup">
<a
className="popup-btn"
onClick={e => {e.preventDefault(); this.setState({ isOpenImage: true, photoIndex: 1 })}}
>
View
</a>
</Link>
</div>
</div>
<div className="col-lg-4 col-md-6">
<div className="single-image">
<img src={require('../images/gallery3.jpg')} alt="gallery" />
<Link href="#popup">
<a
className="popup-btn"
onClick={e => {e.preventDefault(); this.setState({ isOpenImage: true, photoIndex: 2 })}}
>
View
</a>
</Link>
</div>
</div>
<div className="col-lg-4 col-md-6">
<div className="single-image">
<img src={require('../images/gallery4.jpg')} alt="gallery" />
<Link href="#popup">
<a
className="popup-btn"
onClick={e => {e.preventDefault(); this.setState({ isOpenImage: true, photoIndex: 3 })}}
>
View
</a>
</Link>
</div>
</div>
{isOpenImage && (
<Lightbox
mainSrc={images[photoIndex]}
nextSrc={images[(photoIndex + 1) % images.length]}
prevSrc={images[(photoIndex + images.length - 1) % images.length]}
onCloseRequest={() => this.setState({ isOpenImage: false })}
onMovePrevRequest={() =>
this.setState({
photoIndex: (photoIndex + images.length - 1) % images.length,
})
}
onMoveNextRequest={() =>
this.setState({
photoIndex: (photoIndex + 1) % images.length,
})
}
/>
)}
<div className="col-lg-4 col-md-6">
<div className="single-image">
<img src={require('../images/gallery5.jpg')} alt="gallery" />
<Link href="#popup">
<a
className="popup-btn"
onClick={e => {e.preventDefault(); this.setState({ isOpenImage: true, photoIndex: 4 })}}
>
View
</a>
</Link>
</div>
</div>
<div className="col-lg-4 col-md-6">
<div className="single-image">
<img src={require('../images/gallery6.jpg')} alt="gallery" />
<Link href="#popup">
<a
className="popup-btn"
onClick={e => {e.preventDefault(); this.setState({ isOpenImage: true, photoIndex: 5 })}}
>
View
</a>
</Link>
</div>
</div>
<div className="col-lg-4 col-md-6">
<div className="single-image">
<img src={require('../images/gallery7.jpg')} alt="gallery" />
<Link href="#popup">
<a
className="popup-btn"
onClick={e => {e.preventDefault(); this.setState({ isOpenImage: true, photoIndex: 6 })}}
>
View
</a>
</Link>
</div>
</div>
<div className="col-lg-4 col-md-6">
<div className="single-image">
<img src={require('../images/gallery8.jpg')} alt="gallery" />
<Link href="#popup">
<a
className="popup-btn"
onClick={e => {e.preventDefault(); this.setState({ isOpenImage: true, photoIndex: 7 })}}
>
View
</a>
</Link>
</div>
</div>
<div className="col-lg-4 col-md-6">
<div className="single-image">
<img src={require('../images/gallery9.jpg')} alt="gallery" />
<Link href="#popup">
<a
className="popup-btn"
onClick={e => {e.preventDefault(); this.setState({ isOpenImage: true, photoIndex: 8 })}}
>
View
</a>
</Link>
</div>
</div>
</div>
</div>
</section>
);
}
}
export default Gallery;Download the Bootstrap CSS for grid Click here.
After that import _app.js file
import '../public/css/bootstrap.min.css';
import '../public/css/style.css';Add the custom CSS in style.css file
/*================================================
Gallery CSS
=================================================*/
.gallery-area {
padding-top: 100px;
padding-bottom: 70px;
background-color: #f5f5f5;
}
.single-image {
text-align: center;
position: relative;
margin-bottom: 30px;
}
.single-image img {
max-width: 100%;
}
.single-image::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #000000;
opacity: 0;
visibility: hidden;
-webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-transition: .4s;
transition: .4s;
}
.single-image a {
position: absolute;
left: 0;
top: 50%;
right: 0;
margin: 0 auto;
font-size: 30px;
color: #ffffff;
opacity: 0;
visibility: hidden;
margin-top: -20px;
-webkit-transition: .4s;
transition: .4s;
-webkit-transform: scale(0);
transform: scale(0);
font-size: 20px;
}
.single-image a:hover {
color: red;
text-decoration: none;
}
.single-image:hover::before {
visibility: visible;
opacity: .8;
-webkit-transform: scale(1);
transform: scale(1);
}
.single-image:hover a {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}And more info React Image Lightbox
Leave a Reply