Zoom Plugin

The Zoom plugin adds a zoom feature to the lightbox. Zoom is supported for image slides by default and can be enabled for custom slide types.

The plugin supports the following input devices and gestures:

Documentation

The Zoom plugin adds the following Lightbox properties.

Custom Slide Types

By default, the Zoom plugin supports only image slides. You can enable zoom for custom slide types using the supports and maxZoom properties.

<Lightbox
  slides={slides}
  plugins={[Zoom]}
  zoom={{
    // enable zoom for custom slide types
    supports: ["custom-slide"],
    // maximum zoom level for custom slide types (default: 8)
    maxZoom: 4,
    // or use a function for per-slide max zoom
    // maxZoom: (slide) => (slide.type === "custom-slide" ? 4 : 8),
  }}
  render={{
    slide: ({ slide, zoom, maxZoom }) => {
      if (slide.type === "custom-slide") {
        return <MyCustomSlide slide={slide} zoom={zoom} maxZoom={maxZoom} />;
      }
    },
  }}
/>

Custom slide types must provide a render.slide function that renders the slide content. The Zoom plugin wraps the rendered content with a zoom container that handles all zoom gestures, transformations, and offset clamping automatically.

For image slides, the maximum zoom level is calculated from the image dimensions and maxZoomPixelRatio. Custom render functions for image slides are also supported as long as the slide provides width and height attributes. For custom slide types, use maxZoom to set the maximum zoom level (default: 8). When maxZoom is a function, return undefined to use the default value.

TypeScript users must augment the SlideTypes interface to register custom slide types. See Custom Slides for details.

Zoom Ref

The Zoom plugin provides a ref object to control the plugin features externally.

// Zoom ref usage example

const zoomRef = React.useRef(null);

// ...

return (
  <>
    <Lightbox
      slides={slides}
      plugins={[Inline, Zoom]}
      zoom={{ ref: zoomRef }}
      inline={{
        style: { width: "100%", maxWidth: "900px", aspectRatio: "3 / 2" },
      }}
    />

    <button type="button" onClick={() => zoomRef.current?.zoomIn()}>
      Zoom In
    </button>

    <button type="button" onClick={() => zoomRef.current?.zoomOut()}>
      Zoom Out
    </button>
  </>
);

Example

import Lightbox from "yet-another-react-lightbox";
import Zoom from "yet-another-react-lightbox/plugins/zoom";
import "yet-another-react-lightbox/styles.css";

// ...

return (
  <Lightbox
    plugins={[Zoom]}
    // ...
  />
);

Live Demo

You can adjust the live demo settings below.

Sandbox