Skip to main content

How to Add a React Lightbox to Your Website: The Ultimate Guide

  • Author:
  • Updated date:

Susan is a programmer and open source contributor, currently specializing in React and JavaScript.

Discover how to add a React lightbox to your website in this ultimate guide!

Discover how to add a React lightbox to your website in this ultimate guide!

Adding a React Lightbox

If you're currently hoping to add a React lightbox to your website, then look no further! In this guide, we're going to be taking a look at how to add this feature to your website, along with screenshots and code samples.

Adding a React lightbox to your website can be a great way to help users zoom-in on imagery or view a magnified view of an image. This can be useful for showcasing product photos on eCommerce websites and so much more.

Let's get started!

Choosing a React Lightbox Library

When choosing a lightbox library, it's essential to make sure that the library covers your projects requirements and needs. For instance, if you're running an e-commerce site, then it's important to have a lightbox that allows for magnification of images as well as mobile support, too.

Some of the most popular lightbox solutions include Lightgallery and Fancyapps, and these have commercial licenses, so you will need to pay for these if you wish to keep your source code proprietary.

In this tutorial, we're going to be using Lightbox.js to add an image slideshow to our website.

The landing page for the Lightbox.js site

The landing page for the Lightbox.js site

Demo

You can see an example of the type of lightbox we'll be creating in the example GIF below, which cycles through the various nature images we'll also be including from Unsplash. Of course, the theme can also be adjusted as well as the icon and background colors of the lightbox, and we'll be showing you how to do this below also.

Here's what we'll be creating in this tutorial!

Here's what we'll be creating in this tutorial!

1. Installing the Library

Firstly, we'll need to install the library using NPM. Open up a command line tool such as cmd if you're on Windows or a Linux terminal if on Linux and then enter the following command:

npm install lightbox.js-react

This will begin the installation process and add the NPM component to your project's Node modules folder. When it's complete, it's time to add the lightbox to your website!

2. Importing Components

Next, it's time to import the CSS file required and initialize the lightbox with your license key. Add the following to your React app's index.js file in order to import the CSS file and initialization function required:

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

Now that the initialization function has been imported from the library, you can simply call it in the useEffect function within the index.js file, like so:

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

Adding a License Key

If you don't have a license key, you can get one from the official Lightbox.js website. If you have a commercial product or website that isn't open source, you'll need to purchase a license key. There are two plans available, one for individual developers and another for organisations.

Scroll to Continue

If your project is open source, you can request a free license key through the site's contact form.

Simply pass your license key into the first parameter of the function, and then add the plan type within the second parameter of the function. The two plan types available are "team" and "individual."

3. Adding the Lightbox

Next, navigate to the file where you wish to add a lightbox and import the Slideshow Lightbox component for this:

import {SlideshowLightbox} from 'lightbox.js-react'

Now that everything has been imported and setup correctly, it's time to add our lightbox!

Firstly, choose the images you wish to include in the gallery and create image elements with their links—you'll see them included in the code snippet below.

Then, wrap these images in a `SlideshowLightbox` component as shown in the code sample. To do this, simply create a parent `SlideshowLightbox` component and include image elements as the children of this element.

<SlideshowLightbox theme="lightbox" roundedImages={true} className="container grid grid-cols-3 gap-2 mx-auto"> 
 <img className='w-full rounded' src='https://source.unsplash.com/EVQH70oYYNM/1400x1200' />
 <img className='w-full rounded' src='https://source.unsplash.com/8Twe0QOt1Jo/1400x1200' />  
 <img className='w-full rounded' src='https://source.unsplash.com/ROsXqvRzhiQ/1600x1200' />                                
</SlideshowLightbox>

And voila! This will result in the following gallery:

Here's what the lightbox and its imagery looks like!

Here's what the lightbox and its imagery looks like!

Customization

While there are three themes available, there are also lots of customization options available, too. You can adjust the look and feel of the lightbox through specifying props and their values.

Here's an example, where the background color is adjusted through specifying the backgroundColor prop:

<SlideshowLightbox backgroundColor="rgba(12, 12, 12, 0.1)" className="container grid grid-cols-3 gap-2 mx-auto"> 
	<img className="w-full rounded" src="https://source.unsplash.com/C8ikzkkLLso/1400x1200" />
	<img className="w-full rounded object-cover" src="https://source.unsplash.com/jOF2TFSNxQI/1400x1200" />
	<img className="w-full rounded object-cover" src="https://source.unsplash.com/RsRTIofe0HE/1600x1200" />                                      
</SlideshowLightbox>

Other aspects of the lightbox can be customized too, including:

  • Thumbnails: If you'd prefer to display thumbnails, you can set the showThumbnails prop to true.
  • Icon color: The color of the header icons can be specified too as an RGBA, HEX value or CSS color name.
  • Animation type: You can also specify which type of animation you'd like to display when the user navigates to the next image. These include a fade animation and a swiping animation—great for slideshows.

To see all the customization options available, as well as full documentation, be sure to check out the product docs for more information.

Here's an example demo of the day theme, which has a white background and gray icons.

Here's an example demo of the day theme, which has a white background and gray icons.

Exploring the Features

In this section, we're going to take a look at some of the cool features available.

  • Magnifying glass: The library comes equipped with a built-in magnifying glass, which is fantastic for viewing the finer details of imagery. It can be incredibly useful if you have an ecommerce site and would like users to be able to zoom-in to your products and view the details using the magnifying glass.
Here's an example of the magnifying glass, which allows you to see the details of any photo.

Here's an example of the magnifying glass, which allows you to see the details of any photo.

  • Zoom: Another great feature is the zoom functionality provided, which can be carried out in a variety of ways, such as with the mouse wheel or single-click on a desktop, as well as pinch-to-zoom on mobile devices. Pinch-to-zoom is an incredibly important feature for those on mobile devices, and with so much of the world's traffic now on mobile, it's essential to provide this functionality to those exploring your website on a mobile device.
Zooming within Lightbox.js can be done through the mouse wheel or with a pinch-to-zoom motion gesture on mobile devices.

Zooming within Lightbox.js can be done through the mouse wheel or with a pinch-to-zoom motion gesture on mobile devices.

  • Keyboard shortcuts: You can navigate through the imagery using the arrows on your keyboard and can close the lightbox using the Escape key.
  • Slideshow playback: If you'd like to play a slideshow that cycles through the images in your lightbox, then simply click the play button in the top corner. You can also adjust the duration of how long the imagery displays before it switches to the next one too.
  • Full-screen mode: If you'd like to go into full-screen mode, then this feature is also available! Simply click the full-screen icon and the browser will go into full-screen mode.

Steps to Adding a Lightbox

Here's a quick start guide on how to add a lightbox using Lightbox.js to your website!

StepDetails

1. Install with NPM

Firstly, open a command line terminal and install the package through NPM.

2. Import CSS and components

Once the package is installed, simply import the CSS file and components required.

3. Initialize the lightbox

In the React app's index.js file, initialize the lightbox with the initLightboxJS function. This can be called within the useEffect hook or componentDidMount, for instance.

4. Add images

Navigate to the file where you'd like to add the lightbox and add your images within the SlideshowLightbox component.

Go Forth and Create!

Thanks very much for reading this guide, hopefully you've discovered how to add a React lightbox to your website! If you'd like the full details regarding customizing your implementation and so forth, I'd recommend checking out the GitHub repository or NPM package for more details. The GitHub repository is also great for opening and tracking issues, so if you have any feature requests for the library, be sure to make a new issue and add your thoughts there.

If you have any questions, comments or suggestions, be sure to let me know in the comments section below as I'd love to help you out! If you have other lightbox libraries that you think should be mentioned or that you'd like to recommend, be sure to let me know also! I've also included more lightbox solutions in this guide to React lightboxes.

Thanks again for reading, and wishing you the very best with integrating Lightbox.js into your website!

This content is accurate and true to the best of the author’s knowledge and is not meant to substitute for formal and individualized advice from a qualified professional.

© 2022 Susan W

Related Articles