Zoom Plugin

Zoom plugin adds image zoom feature to the lightbox.

The plugin supports the following input devices and gestures:

Input deviceZoomPan
Touchscreen
  • pinch-to-zoom
  • double-tap
  • swipe
Touchpad
  • pinch-to-zoom
  • double-tap
  • double-click
  • scroll (swipe with two fingers)
  • click-and-drag
Keyboard
  • +, -
  • ⌘ + =, ⌘ +  -, ⌘ + 0
  • ⊞ + =, ⊞ +  -, ⊞ + 0
  • ←, →, ↑, ↓
Mouse
  • zoom (Ctrl + mouse wheel)
  • scroll (mouse wheel)
  • click-and-drag

Documentation

Zoom plugin adds the following Lightbox properties.

PropertyTypeDescription
zoom

{
  maxZoomPixelRatio?: number;
  zoomInMultiplier?: number;
  doubleTapDelay?: number;
  doubleClickDelay?: number;
  doubleClickMaxStops?: number;
  keyboardMoveDistance?: number;
  wheelZoomDistanceFactor?: number;
  pinchZoomDistanceFactor?: number;
  scrollToZoom?: boolean;
}

Zoom plugin settings:

  • maxZoomPixelRatio - ratio of image pixels to physical pixels at maximum zoom level
  • zoomInMultiplier - zoom-in multiplier
  • doubleTapDelay - double-tap maximum time delay
  • doubleClickDelay - double-click maximum time delay
  • doubleClickMaxStops - maximum number of zoom-in stops via double-click or double-tap
  • keyboardMoveDistance - keyboard move distance
  • wheelZoomDistanceFactor - wheel zoom distance factor
  • pinchZoomDistanceFactor - pinch zoom distance factor
  • scrollToZoom - if true, enables image zoom via scroll gestures for mouse and trackpad users

Default: { maxZoomPixelRatio: 1, zoomInMultiplier: 2, doubleTapDelay: 300, doubleClickDelay: 500, doubleClickMaxStops: 2, keyboardMoveDistance: 50, wheelZoomDistanceFactor: 100, pinchZoomDistanceFactor: 100, scrollToZoom: false }

animation

{
  zoom?: number;
}

Zoom animation duration.

Default: 500

render

{
  buttonZoomIn?: () => React.ReactNode;
  buttonZoomOut?: () => React.ReactNode;
  iconZoomIn?: () => React.ReactNode;
  iconZoomOut?: () => React.ReactNode;
}

Custom render functions:

  • buttonZoomIn - render custom Zoom In button
  • buttonZoomOut - render custom Zoom Out button
  • iconZoomIn - render custom Zoom In icon
  • iconZoomOut - render custom Zoom Out icon

Example

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

// ...

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

Live Demo

You can adjust the live demo settings below.

CodeSandbox

Edit on CodeSandbox