Getting started

Lightbox.js is a fully responsive, customizable, all-in-one lightbox solution for React with several built-in presets.

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.

You can also get a 20% off discount with the coupon code OFFER20 at checkout.

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' showThumbnails={true}>
  <img className='w-full rounded' src='https://images.pexels.com/photos/580151/pexels-photo-580151.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2' />
  <img className='w-full rounded' src='https://images.pexels.com/photos/13996896/pexels-photo-13996896.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2' />  
  <img className='w-full rounded' src='https://images.pexels.com/photos/13208323/pexels-photo-13208323.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2' />
 
</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!

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' showThumbnails={true}>
          <img className='w-full rounded' src='https://images.pexels.com/photos/580151/pexels-photo-580151.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2' />
          <img className='w-full rounded' src='https://images.pexels.com/photos/13996896/pexels-photo-13996896.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2' />  
          <img className='w-full rounded' src='https://images.pexels.com/photos/13208323/pexels-photo-13208323.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2' />
               
        </SlideshowLightbox> 
    }
}

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://images.pexels.com/photos/580151/pexels-photo-580151.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2' />
          <img className='w-full rounded' src='https://images.pexels.com/photos/13996896/pexels-photo-13996896.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2' />  
          <img className='w-full rounded' src='https://images.pexels.com/photos/13208323/pexels-photo-13208323.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2' />
   
        </SlideshowLightbox> 
      )
}

Alternative Method: Array of Images

If you'd prefer to create an array of images, and pass this array to the lightbox, this is also possible. Simply create an array of images (as shown in the code sample below) and pass this array to the imagesprop.

import React from 'react'
import {SlideshowLightbox} from 'lightbox.js-react'
import 'lightbox.js-react/dist/index.css'
          
function Demo() {

  const images = [
    {
      src: 'https://source.unsplash.com/sQZ_A17cufs/549x711',
      alt: 'Mechanical keyboard with white keycaps.',
    },
    {
      src: 'https://source.unsplash.com/rsAeSMzOX9Y/768x512',
      alt: 'Mechanical keyboard with white, pastel green and red keycaps.',
    },
    {
      src: 'https://source.unsplash.com/Z6SXt1v5tP8/768x512',
      alt: 'Mechanical keyboard with white, pastel pink, yellow and red keycaps.',
    },
  ]

  let [isOpen, setIsOpen] = useState(false);  

  return (
    <div>
      <button onClick={() => {setIsOpen(true)}}> 
        Open Lightbox
      </button>
      <SlideshowLightbox 
        images={images} 
        showThumbnails={true} 
        open={isOpen} 
        lightboxIdentifier="lbox1"
        onClose={() =>{setIsOpen(false)}}>     
      </SlideshowLightbox>
    </div>
  )
}

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.

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

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 an e-mail to silviaodwyerdev [at] 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 [at] gmail.com or through the contact form here, and I'll get back to you very soon.