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

{
  ref?: React.ForwardedRef​<ZoomRef>;
  maxZoomPixelRatio?: number;
  zoomInMultiplier?: number;
  doubleTapDelay?: number;
  doubleClickDelay?: number;
  doubleClickMaxStops?: number;
  keyboardMoveDistance?: number;
  wheelZoomDistanceFactor?: number;
  pinchZoomDistanceFactor?: number;
  scrollToZoom?: boolean;
}

Zoom plugin settings:

  • ref - Zoom plugin ref. See Zoom Ref for details.
  • 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

{
  slide?: ({..., zoom, maxZoom}: {..., zoom: number; maxZoom: number }) => React.ReactNode;
  buttonZoom?: (props: ZoomRef) => React.ReactNode;
  iconZoomIn?: () => React.ReactNode;
  iconZoomOut?: () => React.ReactNode;
}

Custom render functions:

  • slide - Zoom plugin adds zoom and maxZoom props to the slide render function
  • buttonZoom - render custom Zoom In / Zoom Out control
  • iconZoomIn - render custom Zoom In icon
  • iconZoomOut - render custom Zoom Out icon
on

{
  zoom?: ({ zoom }: { zoom: number }) => void;
}

Callbacks:

  • zoom - a callback called when zoom level changes

Zoom Ref

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

// Zoom ref usage example

const zoomRef = React.useRef(null);

// ...

<Lightbox
  plugins={[Zoom]}
  zoom={{ ref: zoomRef }}
  on={{
    click: () => zoomRef.current?.zoomIn()
  }}
  // ...
/>
PropertyTypeDescription
zoomnumberCurrent zoom level.
maxZoomnumberMaximum zoom level.
offsetXnumberHorizontal offset.
offsetYnumberVertical offset.
disabledboolean
If true, zoom is unavailable for the current slide.
zoomIn() => void
Increase zoom level using zoomInMultiplier.
zoomOut() => void
Decrease zoom level using zoomInMultiplier.

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
  plugins={[Zoom]}
  // ...
/>

Live Demo

You can adjust the live demo settings below.

CodeSandbox

Edit on CodeSandbox