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'

Adding a license key

Next, a license key will need to be initialized in order to use Lightbox.js. If you require a license key you can purchase an individual or team license here, but if your project is open-source, just contact us to get a free license key.

If you wish to purchase a license, you can get a 20% off discount with the coupon code OFFER20 at checkout.

The license key can be initialized like so:

useEffect(() => {
    initLightboxJS("Insert License key", "Insert plan type here");
});

The two plan types are individual and team.

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