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, as well as the CSS file which provides the styling for the library:

import 'lightbox.js-react/dist/index.css'
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://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.',
  },
]

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'
import 'lightbox.js-react/dist/index.css'
          
function Demo() {

    let [isOpen, setIsOpen] = useState(false);
    let [startingIndex, setStartingIndex] = useState(0); //optional
  
    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.',
      },
    ]

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: