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

Next.js Guide

Lightbox.js also supports Next.js, and due to popular demand, new functionality has been added to support server-side rendering frameworks such as Next.js and Gatsby. Additionally, if you'd like to use the Next.js Image component, this feature is also available too.

If you have any queries, don't hesitate to contact us, and we'll be in touch!

In this guide, we're going to take a look at how to set up a lightbox with Next.js.

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

Create an array of images:

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

Next, wrap the images you wish to include in the slideshow gallery within a SlideshowLightbox component as shown below.

<SlideshowLightbox lightboxIdentifier="lightbox1" framework="next" images={images}>
        {images.map((image) => (
            <Image
              src={image.src}
              alt={image.alt}
              height={500}
              width={500}
              data-lightboxjs="lightbox1"
              quality={80}
            />
        ))}
</SlideshowLightbox>

To support Next.js, 3 extra props are required:

  • images: An array of images containing src and alt attributes
  • lightboxIdentifier: A string value, should be equal to the data-lightboxjs data attribute passed to each image.
  • framework: Set to "next" for Next.js.

Data attributes

To identify the image elements, a data-lightboxjs data attribute should be added to each Next.js Image used. This should be equal to the lightboxIdentifier prop. The same group of images would have the same lightbox identifier attribute. If you wanted to add a 2nd lightbox to the page, then a different lightbox identifier would be used etc.

The lightbox looks for any images that have this data attribute and then includes them in the lightbox. So if you have nested components, the images can be identified by the lightbox as a result.

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>

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>

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

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

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"