ReactJS Image Lightbox Gallery

How to create a reactJS image lightbox gallery?

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-lightbox

Create 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