Open/close the lightbox

In this guide, we'll be taking a look at how to open or close the lightbox by toggling the open prop.

Demo

Firstly, let's take a look at a demo of this in action.

Just click on the button below to open the lightbox:

Rather than requiring the user to click an image to open the lightbox, which is the default behaviour, it is opened via the button instead. This can be useful if you want to implement custom functionality for opening/closing the lightbox.

Import

To get started, import the SlideshowLightbox component required:

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

Adding the open prop

If you'd like to open or close the lightbox, this can be done by toggling the open prop of the lightbox.

Also, if you'd like to specify the starting index that the lightbox should open to, simply pass an index value to the startingSlideIndex prop. This is optional however, and the default value is 0.

Here is the JSX required:

<SlideshowLightbox 
  open={isOpen} 
  startingSlideIndex={startingIndex}
  images={images}
  onClose={() => setIsOpen(false)} 
  lightboxIdentifier="lbox1">
 ...
</SlideshowLightbox>

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

Next up, an array of images needs to be created, which is then passed to the SlideshowLightbox component.

const images = [
{
  src: 'https://images.pexels.com/photos/580151/pexels-photo-580151.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
  alt: 'Mountains with clouds',
},
{
  src: 'https://images.pexels.com/photos/13996896/pexels-photo-13996896.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
  alt: 'Mountains with clear blue sky in background',
},
{
  src: 'https://images.pexels.com/photos/13208323/pexels-photo-13208323.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
  alt: 'Blue lake surrounded by mountains',
},
]

Adding An Open Button

This is optional, but if you'd like to try out the open/close functionality, you could create a button which sets the lightbox's open state to true. When the lightbox is closed, the onClose event will set the open state variable to false automatically.

<button onClick={() => {setIsOpen(true)}}> 
Open Lightbox
</button>

Full Example

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

    let [isOpen, setIsOpen] = useState(false);
    let [startingIndex, setStartingIndex] = useState(0); //optional
  
    const images = [
      {
        src: 'https://images.pexels.com/photos/580151/pexels-photo-580151.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
        alt: 'Mountains with clouds',
      },
      {
        src: 'https://images.pexels.com/photos/13996896/pexels-photo-13996896.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
        alt: 'Mountains with clear blue sky in background',
      },
      {
        src: 'https://images.pexels.com/photos/13208323/pexels-photo-13208323.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
        alt: 'Blue lake surrounded by mountains',
      },
    ]

return (
    <div>
        <SlideshowLightbox 
            open={isOpen} 
            startingSlideIndex={startingIndex}
            images={images}
            showThumbnails={true}
            onClose={() => setIsOpen(false)} 
            lightboxIdentifier="lbox1">
        </SlideshowLightbox>
        <button className="bg-indigo-500 rounded-lg text-white px-4 py-4 transition hover:bg-indigo-600" 
        onClick={() => {setIsOpen(true)}}> 
            Open Lightbox
        </button>
    </div>
      )
}

Here's a demo of the above, just click the button below to open the lightbox: