Thumbnails Plugin

Thumbnails plugin adds thumbnails track to the lightbox.

The plugin comes with an additional CSS stylesheet.

import "yet-another-react-lightbox/plugins/thumbnails.css";

Documentation

Thumbnails plugin adds the following Lightbox properties.

PropertyTypeDescription
thumbnails

{
  position?: "top" | "bottom" | "start" | "end";
  width?: number;
  height?: number;
  border?: number;
  borderRadius?: number;
  padding?: number;
  gap?: number;
  imageFit?: "contain" | "cover";
  vignette?: boolean;
}

Thumbnails plugin settings:

  • position - thumbnails position
  • width - thumbnail width
  • height - thumbnail height
  • border - thumbnail border width
  • borderRadius - thumbnail border radius
  • padding - thumbnail inner padding
  • gap - gap between thumbnails
  • imageFit - object-fit setting
  • vignette - vignette effect on the edges of the thumbnails track

Defaults: { position: "bottom", width: 120, height: 80, border: 1, borderRadius: 4, padding: 4, gap: 16, imageFit: "contain", vignette: true }

render

{
  thumbnail?: (
    { slide, rect, render, imageFit }: { slide: Slide; rect: ContainerRect; render: Render; imageFit: "contain" | "cover" }
  ) => React.ReactNode;
}

Custom thumbnail render function.

Example

import Lightbox from "yet-another-react-lightbox";
import Thumbnails from "yet-another-react-lightbox/plugins/thumbnails";
import "yet-another-react-lightbox/styles.css";
import "yet-another-react-lightbox/plugins/thumbnails.css";

// ...

<Lightbox
  open={open}
  close={() => setOpen(false)}
  slides={slides}
  plugins={[Thumbnails]}
/

Live Demo

You can adjust the live demo settings below.

CodeSandbox

Edit on CodeSandbox