Slideshow Lightbox

This component features a lightbox containing a slideshow, which allows users to cycle through the images in the gallery.

The following features are supported:

Zooming: Users can zoom through their mouse wheel on desktop devices, or through pinch-to-zoom on 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.
Lots of customization options: There are lots of props available that you can edit to update the theme of the lightbox, as well as its functionality.

Demo

Import

Firstly, import the components required:

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

Usage

Next, wrap the images you wish to include in the slideshow gallery within 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>

This will display an image gallery as shown below:

Check out the Image component to display a single image.

Alternative Method: Array of Images

An alternative method of rendering images in the lightbox is by passing an array of images to the SlideshowLightbox component. To get started, just create an array of images (as shown in the code sample below) and then pass this array to the imagesprop.

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

  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',
    },
  ]

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

Tutorials

Here are some tutorials for utilizing various features of Lightbox.js, such as video support, opening/closing the lightbox and so forth:

Customization

Theme

If you'd like to change the theme of the lightbox, this can be done by passing a theme name to the theme prop, with the options including: "lightbox", "night", "day"

<SlideshowLightbox theme="lightbox">
...
</SlideshowLightbox>

Full Screen Images

If you'd like the images to take up the screen's full available width and height, simply set thefullScreen prop to true. The default is false.

<SlideshowLightbox fullScreen={true}>
...
</SlideshowLightbox>

Show Controls

If you'd like to remove the controls (in the top-right corner) of the lightbox, this can be done by setting theshowControls prop to false:

<SlideshowLightbox showControls={false}>
...
</SlideshowLightbox>

Lightbox Image Styling

If you'd like to add custom styling to the lightbox's image, custom classname(s) to be passed via the `lightboxImgClass` prop.

<SlideshowLightbox lightboxImgClass={"lightboxImg"} 
... 
</SlideshowLightbox>

You could then select the `img` component within the lightbox with CSS, such as:

.lightboxImg img {
...
}

Background Color

If you'd like to customize the background color of the lightbox, this can be done by passing a color to the color prop, as a RGB, RGBA, HEX or CSS color name value:

<SlideshowLightbox backgroundColor="white">
...
</SlideshowLightbox>

Icon Color

The icon colors can also be specified through the `iconColor` prop, and the color can be a RGB, RGBA, HEX or CSS color name value.

<SlideshowLightbox iconColor="silver">
...
</SlideshowLightbox>

Thumbnail border

Each thumbnail contains a border which can be customized or removed entirely (by setting the border color to transparent). The border can be customized through specifying a color value for the `thumbnailBorder` prop, and the color can be a RGB, RGBA, HEX or CSS color name value.

<SlideshowLightbox thumbnailBorder="silver">
...
</SlideshowLightbox>

Show Thumbnails

If you would like to remove thumbnails entirely from the lightbox, you can do so by setting the `showThumbnails` prop to `false`.

<SlideshowLightbox showThumbnails="false">
...
</SlideshowLightbox>

Show/Hide Certain Icons

If you'd like to show/hide particular icons in the controls at the top of the lightbox, this can be done by toggling the respective values to true/false.

The props are:

showFullScreenIcon
showThumbnailIcon
showSlideshowIcon
showMagnificationIcons

<SlideshowLightbox showMagnificationIcons={false} showSlideshowIcon={false}>
...
</SlideshowLightbox>

Image Animation

The animation type can be specified through the `imgAnimation` prop, and the two values include:

imgMotion
fade

<SlideshowLightbox imgAnimation="fade">
...
</SlideshowLightbox>

Close Lightbox When Outside of Image Is Clicked

If you'd like to close the lightbox when the outside of the image is clicked, this can be done by setting the modalClose prop to clickOutside:

<SlideshowLightbox modalClose="clickOutside">
...
</SlideshowLightbox>

Open

If you'd like to open/close the lightbox (through a custom element, such as via a button), this can be done by toggling the value of the open prop. For a full tutorial, take a look at this guide here.

<SlideshowLightbox open={isOpen}>
...
</SlideshowLightbox>

Starting slide index

The starting slide index the lightbox should open to when the modal is opened/closed. The default is 0. For a full tutorial, take a look at this guide here.

<SlideshowLightbox startingSlideIndex={0}>
...
</SlideshowLightbox>

Disable zooming

By default, image zooming is enabled. To disable the image zoom functionality, set the disableImageZoom prop to true:

<SlideshowLightbox disableImageZoom={true}>
...
</SlideshowLightbox>

Slideshow Interval

When the slideshow is playing, the amount of time between slideshow transitions can be specified through the `slideshowInterval` prop in milliseconds.

<SlideshowLightbox slideshowInterval={1600}>
...
</SlideshowLightbox>

Animate Thumbnails

By default, the thumbnails are animated in and out of the DOM using a fade-in effect. If you would prefer to switch this animation off, this can be done so by setting the `animateThumbnails` prop to `false`.

<SlideshowLightbox animateThumbnails={false}>
...
</SlideshowLightbox>

Rounded Images

Apply rounded effect to the images

<SlideshowLightbox roundedImages={true}>
...
</SlideshowLightbox>

nextArrow

Custom component to be included as the next arrow. If you'd like to render a different arrow to the default, just pass a custom component to the `nextArrow` prop.

<SlideshowLightbox nextArrow={<CustomArrow />}>
...
</SlideshowLightbox>

prevArrow

Custom component to be included for the previous arrow. If you'd like to render a different arrow to the default, just pass a custom component to the `prevArrow` prop.

<SlideshowLightbox prevArrow={<CustomArrow />}>
...
</SlideshowLightbox>

rightArrowClassname

Custom classname for the lightbox's right arrow

<SlideshowLightbox rightArrowClassname="rightArrow">
...
</SlideshowLightbox>

leftArrowClassname

Custom classname for the lightbox's left arrow

<SlideshowLightbox leftArrowClassname="leftArrow">
...
</SlideshowLightbox>

captionStyle

Style object passed to the image caption element

<SlideshowLightbox captionStyle={{color: "silver"}}>
...
</SlideshowLightbox>

Props

theme: String - The theme to be applied to the lightbox. Options include day, night, lightbox

fullScreen: Boolean - Whether to display images so that they take up the screen's full width and height

backgroundColor: String - the background color of the lightbox, as a CSS color name, RGBA value or HEX code

iconColor: String - the icon color for the lightbox, as a CSS color name, RGBA value or HEX code

showControls: Boolean - Whether or not to show the controls (controls consist of the zoom buttons, slideshow button etc)

disableImageZoom: Boolean - Set to false if you would like to disable image zooming and panning

modalClose: Boolean - Set to "clickOutside" if you would like the lightbox to close when the outside of an image is clicked

thumbnailBorder: String - the color of the thumbnails' borders, as a CSS color name, RGBA value or HEX code

showThumbnails: Boolean - Whether or not to show image thumbnails.

slideshowInterval: Number - the time in milliseconds before the slideshow transitions to the next image.

open: Boolean - Whether or not the lightbox is displayed

startingSlideIndex: Boolean - The starting index the lightbox should open to when the lightbox is opened

animateThumbnails: Boolean - Whether or not to animate the thumbnails as they enter the view.

showFullScreenIcon: Boolean - Whether or not to show the full screen icon in the controls

showThumbnailIcon: Boolean - Whether or not to show the thumbnail icon in the controls

showSlideshowIcon: Boolean - Whether or not to show the slideshow icon in the controls

showMagnificationIcons: Boolean - Whether or not to show the image magnification icons in the controls

roundedImages: String - Apply rounded effect to the lightbox images

nextArrow: Custom component - Custom element to be displayed instead of the default next arrow

prevArrow: Custom component - Custom element to be displayed instead of the default previous arrow

rightArrowClassname: String - Custom classname(s) for the lightbox's right arrow

leftArrowClassname: String - Custom classname(s) for the lightbox's left arrow

captionStyle: Style object - Custom style object to be passed to the image caption element

lightboxImgClass: String - Custom classname(s) for the lightbox's image wrapper element

Image component

If you'd prefer to display a single image within a lightbox, be sure to check out the Image component.

Feature request

Want to request a new feature? Be sure to open an issue in our GitHub repository!