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

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

Demo

Import

Firstly, import the components required as well as the CSS file for this library:

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

This will display an image gallery as shown below:

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:

Check out the Image component to display a single image.

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

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>
Whether to display images so that they take up tne screen's full width and height

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>

Image Animation

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

  • imgMotion
  • fade
<SlideshowLightbox imgAnimation="fade">
...
</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>

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

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.

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

imgAnimation: String - The image animation type to show between image transitions in the slideshow, options include "fade" and "imgDrag"