Open In App

How to create an image lightbox with Zoom In and Zoom Out functionality in ReactJS ?

Last Updated : 20 Nov, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how to create an image lightbox with Zoom In and Zoom Out functionality in React. So let’s get started by installing react using the create-react-app command.

Prerequisites:

Steps to Create the React app and Installing the required modules:

Step 1: Create the React app:

npx create-react-app myapp

Step 2: We will install a dependency using npm named react-image-lightbox:

npm i react-image-lightbox

Project Structure:

The updated dependencies in package.json file will look like:

  "dependencies": {
"react": "^18.2.0",
"react-image-lightbox": "^5.1.4",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}

Example: We will be adding a lightbox component to a React application. Using the useState hook, you manage two states: `showModal` and `indexOfImages` to track the current image index. Clicking a button sets `showModal` to true, rendering the LightBox component.

Javascript




import React, { useState } from "react";
import Lightbox from "react-image-lightbox";
import "react-image-lightbox/style.css";
 
const arrOfImages = [
];
function App() {
    const [indexOfImages, setIndexOfImages] = useState(0);
    const [showModal, setShowModal] = useState(false);
    const openModalAndSetIndex = (index) => {
        setIndexOfImages(index);
        setShowModal(true);
        return;
    };
    return (
        <div className="App">
            <h1>Image Slide Show With Zoom In/Out feature</h1>
 
            {arrOfImages.map((image, index) => (
                <img
                    key={image}
                    style=
                    {
                        {
                            height: "200px",
                            width:"300px", margin: "20px"
                        }
                    }
                    src={image}
                    alt={image}
                    onClick={() => openModalAndSetIndex(index)}
                />
            ))}
 
            <div>
                <button type="button"
                    onClick={() => setShowModal(true)}>
                    Show Lightbox
                </button>
            </div>
 
            {showModal && (
                <Lightbox
                    mainSrc=
                    {arrOfImages[indexOfImages]}
                    nextSrc=
                    {arrOfImages[(indexOfImages + 1)
                        % arrOfImages.length]}
                    prevSrc={
                        arrOfImages[
                        (indexOfImages + arrOfImages.length - 1)
                        % arrOfImages.length
                        ]
                    }
                    onCloseRequest={() => setShowModal(false)}
                    onMovePrevRequest={() =>
                        setIndexOfImages(
                            (indexOfImages + arrOfImages.length - 1)
                            % arrOfImages.length
                        )
                    }
                    onMoveNextRequest={() =>
                        setIndexOfImages(
                            (indexOfImages + arrOfImages.length + 1)
                            % arrOfImages.length
                        )
                    }
                />
            )}
        </div>
    );
}
 
export default App;


Step to run the App:

npm start

Output:



Similar Reads

How to zoom-in and zoom-out image using ReactJS?
React is a JavaScript library for building user interfaces. React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. In ReactJS whatever we write that looks like HTML is not pure HTML actually. All the HTM
2 min read
How to zoom-in and zoom-out image using JavaScript ?
Given an image, the task is to increase and decrease the image size using JavaScript. Use the following property to increase and decrease the image. These are the following ways: Table of Content Using Width propertyUsing Height propertyUsing Width propertyIt is used to change the new values to resize the width of the element. Get the selector of t
2 min read
How to Zoom in/Zoom out using React-PDF in React JS ?
Zooming in or out in React-PDF within a React JS application is achieved by using the 'scale' prop inside the `&lt;Page /&gt;` component. The 'scale' prop accepts decimal values; values greater than 1 zoom in, while values less than 1 zoom out the page. Prerequisites:React JSReact Functional ComponentsSyntax: &lt;page scale = {value} /&gt; // When
2 min read
How to Create Image Lightbox Gallery using HTML CSS and JavaScript ?
A lightbox gallery is basically used to view the gallery images in detail specifically. You can code the JavaScript to do so but also we can use some downloaded JS and CSS. In this article, we will download the lightbox and attach the JS and CSS files into our code. For our own design satisfaction, we can also use the CSS code as we want. We will d
3 min read
Google AMP amp-image-lightbox
An image gallery is a popular feature in websites and with amp-image-lightbox developers can add lightbox effects easily to AMP HTML pages, to activate the amp-image-lightbox we use the on action on amp-image component. Required Script: Importing the amp-imag-lightbox component into the header. C/C++ Code &lt;script async custom-element=&quot;amp-i
2 min read
Zoom Functionality in ElectronJS
ElectronJS is an Open Source Framework used for building Cross-Platform native desktop applications using web technologies such as HTML, CSS, and JavaScript which are capable of running on Windows, macOS, and Linux operating systems. It combines the Chromium engine and NodeJS into a Single Runtime. All traditional web Browsers have Zoom functionali
9 min read
How to create a Photo lightbox popup using jQuery Mobile ?
jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a Photo lightbox popup using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. &lt;link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.5/jquer
1 min read
Google AMP amp-lightbox-gallery
The amp-lightbox-gallery component is used to give a lightbox experience for other amp components like amp-carousel, amp-img. Presently only images are supported by amp-lightbox-gallery. Required Script: Importing the amp-lightbox-gallery component into the header. C/C++ Code &lt;script async custom-element=&quot;amp-lightbox-gallery&quot; src=
2 min read
How to add lightbox effect to amp-carousel in Google AMP ?
The amp-carousel is used to make an image carousel in an AMP HTML page. In AMP HTML, it is also possible to add a lightbox effect to an amp-carousel using amp-lightbox-gallery given that amp-carousel only contains images in them. Required Script: Importing amp-carousel component into the header. C/C++ Code &lt;script async custom-element=&quot;amp-
2 min read
How to Add a Gallery in WordPress with a Lightbox Effect ?
Adding a responsive lightbox effect to the galleries on your WordPress website allows you to showcase your images in a more professional and engaging manner. When users click on an image, it opens in a pop-up window, providing a distraction-free viewing experience. Whether you’re a photographer displaying high-resolution images or a WooCommerce sto
3 min read