Getting started

Install the package, import the stylesheet once, then bind the viewer to the element that holds your images.

Install

Lightbox brings Carousel with it for paging.

npm install @reuse-sh/lightbox

Bind a gallery

Every image inside the element opens in the viewer, in page order. With React, the hook opens the same viewer from your own buttons.

import { bindLightboxGallery } from "@reuse-sh/lightbox";
import "@reuse-sh/lightbox/styles.css";

const gallery = document.querySelector("[data-gallery]");
const lightbox = bindLightboxGallery(gallery, {
  thumbnails: true,
  imageClick: "zoom",
});

// Later, when the gallery leaves the page
lightbox.destroy();

import { useLightbox } from "@reuse-sh/lightbox/react";
import "@reuse-sh/lightbox/styles.css";
import { useRef } from "react";

export function Gallery({ photos }) {
  const lightbox = useLightbox({ thumbnails: true });
  const root = useRef(null);
  const open = (index) => {
    const images = root.current.querySelectorAll("img");
    lightbox.open(photos.map((photo, i) => ({ ...photo, origin: images[i] })), index);
  };
  return (
    <div ref={root}>
      {photos.map((photo, index) => (
        <button key={photo.src} onClick={() => open(index)}>
          <img src={photo.src} alt={photo.alt} />
        </button>
      ))}
    </div>
  );
}

Clean up

destroy() removes the listeners and restores every style it changed, so the viewer can come and go with a route. The React hook does this when the component unmounts.