Get 30% off with our early-bird discount. For a limited time only!

Getting started

Lightbox.js is a fully responsive, customizable, all-in-one lightbox solution for React with several built-in presets. Explore the full suite of available lightboxes in the Components section.

Features

  • Keyboard shortcuts: You can cycle through the images by pressing the right and left arrow keys.
  • Full-screen mode: To exit full-screen mode, click the minimize icon or press the `Esc` key
  • Zoom: Users can zoom through the mouse-wheel/using the UI controls on their desktop or through pinch-to-zoom on their mobile devices.
  • Panning: Once an image is zoomed into, the image can be panned by dragging the image through the mouse, or if on a mobile device, with a swipe-to-drag motion.
  • Image drag: Images can be navigated from one image to the next by dragging the image using the mouse or with a swipe-to-drag motion.
  • Theming: A variety of preset themes are also available.
  • Customization: All lightbox components can be fully customized, including background color, icon colors and so much more.
  • Thumbnails: The option to add thumbnails is also available, along with animated entry/exit transitions.

Demo

Installation

To get started, simply install the NPM package as follows:

npm install lightbox.js-react --save

Import

Once the NPM package has been installed, you're ready to start using the React lightboxes provided!

Then, import the components required, plus the CSS file for this library.

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

Usage

Adding a license key

A license key will need to be specified in order to use Lightbox.js. If you require a license key, you can purchase a license here, or if your project is open-source, simply contact us to get a free license key.

You can initialize the license key as so:

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

The two plan types are individual and team.

Setting up the lightbox

Next, wrap the images in a SlideshowLightbox component as shown below.

<SlideshowLightbox 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/1400x1200' />       
</SlideshowLightbox> 

In this example, we're including our images in a grid format. Tailwind CSS is used to style the images so that they appear in a grid format, since image styling of the inline images themselves is left to the developer(s) depending on their project and use case.

The resulting demo

And that's all that is required! With the above JSX, the following gallery is displayed, try clicking the images to see the lightbox appear!

Full example

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

class Demo extends Component {
    render() {
        return <SlideshowLightbox className='container grid grid-cols-3 gap-2 mx-auto'>
            <img className='w-full rounded' src='https://source.unsplash.com/pAKCx4y2H6Q/1400x1200' />
            <img className='w-full rounded' src='https://source.unsplash.com/AYS2sSAMyhc/1400x1200' />  
            <img className='w-full rounded' src='https://source.unsplash.com/Kk8mEQAoIpI/1400x1200' />
            <img className='w-full rounded' src='https://source.unsplash.com/HF3X2TWv1-w/1400x1200' />              
        </SlideshowLightbox> 
    }
}

Full example using functional components

Here's an example using functional components and Tailwind CSS to style the images, so that they appear in a grid format. However external CSS can be used for this, or styling with the style object on the image gallery container.

import React from 'react'
import {SlideshowLightbox} from 'lightbox.js-react'
import 'lightbox.js-react/dist/index.css'
          
function Demo() {
return (
        <SlideshowLightbox className='container grid grid-cols-3 gap-2 mx-auto'>
          <img className='w-full rounded' src='https://source.unsplash.com/pAKCx4y2H6Q/1400x1200' />
          <img className='w-full rounded' src='https://source.unsplash.com/AYS2sSAMyhc/1400x1200' />  
          <img className='w-full rounded' src='https://source.unsplash.com/Kk8mEQAoIpI/1400x1200' />
        </SlideshowLightbox> 
      )
}

This will display the following image gallery, along with a lightbox that will appear after one of the images are clicked:

Theming & Customization

Now that we've taken a look at how to setup the lightbox, it's time to customize the lightbox according to your project's requirements. For instance, if you're running an eCommerce product store with a light theme background, then the background of the lightbox can be adjusted to integrate with your current website.

Available Themes

There are 3 themes available, which can be selected via setting the `theme` prop:

  • day: A light theme with a white background and gray icons
  • night: A dark theme with gray icons
  • lightbox: A theme with a semi-transparent gray background
<SlideshowLightbox theme="lightbox">
  <img className='w-full rounded' src='https://source.unsplash.com/pAKCx4y2H6Q/1400x1200' />
  <img className='w-full rounded' src='https://source.unsplash.com/AYS2sSAMyhc/1400x1200' />  
  <img className='w-full rounded' src='https://source.unsplash.com/Kk8mEQAoIpI/1400x1200' />
</SlideshowLightbox> 

Day theme example

Night theme example

Lightbox theme example

Further Customization

To specify the background color, icon colors and much more, be sure to take a look at our Slideshow Lightbox documentation for more details.

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

License

Lightbox.js is licensed under the GPL v3 License. To see how this applies to your software, see below.

Commercial Products

For commercial websites, products, applications or software, then a commercial license can be purchased here.

Open-source

For open-source projects under a license that is compatible with the GPLv3 License, a copy of Lightbox.js can be used free of charge. To get a license key, simply send a message to silviaodwyerdev @ gmail.com or through our contact form.

Check out our pricing page to know more about the commercial plans available.

Support

For any questions or feedback you may have, or if you'd like support, then be sure to contact me at my email: silviaodwyerdev @ gmail.com or through the contact form here, and I'll get back to you very soon.