Adding React Image Zoom Functionality with Lightbox.js

Welcome! In this guide, I'll be showing you how you can add React image zoom functionality to your website, web app or React project.

Import

Firstly, import the components required as well as the CSS file for this library:

import 'lightbox.js-react/dist/index.css'
import {SlideshowLightbox} from 'lightbox.js-react'

Adding a license key

Next, a license key will need to be initialized in order to use Lightbox.js. If you require a license key you can purchase an individual or team license here, but if your project is open-source, just contact us to get a free license key.

If you wish to purchase a license, you can get a 20% off discount with the coupon code OFFER20 at checkout.

The license key can be initialized like so:

useEffect(() => {
    initLightboxJS("Insert License key", "Insert plan type here");
});

The two plan types are individual and team.

Usage

To initialize the lightbox, include the images you wish to add to the lightbox within a `SlideshowLightbox` component as shown below.

In this example, we'll be adding a night theme to the lightbox also, along with rounded images.

<SlideshowLightbox theme="night" showThumbnails={true} roundedImages={true} 
className="container grid grid-cols-3 gap-2 mx-auto"> 
    <img className="w-full rounded" src={"https://images.pexels.com/photos/1470405/pexels-photo-1470405.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"} />
    <img className="w-full rounded object-cover" src={"https://images.pexels.com/photos/2693282/pexels-photo-2693282.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"} />  
    <img className="w-full rounded object-cover" src={"https://images.pexels.com/photos/315191/pexels-photo-315191.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"} />
    <img className="w-full rounded" src={"https://images.pexels.com/photos/2303337/pexels-photo-2303337.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"} />       

    <img className="w-full rounded" src={"https://images.pexels.com/photos/2339009/pexels-photo-2339009.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"} />
    <img className="w-full rounded" src={"https://images.pexels.com/photos/2434627/pexels-photo-2434627.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"} />   
                                      
</SlideshowLightbox>

You'll find a live preview of the demo below, try clicking on the images to open the lightbox.

Zooming into Images

You can zoom into images by clicking on the magnification icons in the controls, or by double-clicking on the image. Plus image panning is also supported, so once you've zoomed into an image, you can move around the image also by dragging the image.

If you're on a mobile device, images can be magnified through the pinch-to-zoom mobile gesture.

Further Customization

To customize the lightbox and theme further, be sure to take a look at the Slideshow Lightbox documentation for more details.

Check out the Slideshow Lightbox documentation for more details on customization options, plus code samples too.