Zoom Plugin
Zoom plugin adds image zoom feature to the lightbox.
The plugin supports the following input devices and gestures:
Input device | Zoom | Pan |
---|---|---|
Touchscreen |
|
|
Touchpad |
|
|
Keyboard |
|
|
Mouse |
|
|
Documentation
Zoom plugin adds the following Lightbox
properties.
Property | Type | Description |
---|---|---|
zoom | { | Zoom plugin settings:
Default: { maxZoomPixelRatio: 1, zoomInMultiplier: 2, doubleTapDelay: 300, doubleClickDelay: 500, doubleClickMaxStops: 2, keyboardMoveDistance: 50, wheelZoomDistanceFactor: 100, pinchZoomDistanceFactor: 100, scrollToZoom: false } |
animation | { | Zoom animation duration. Default: 500 |
render | { | Custom render functions:
|
on | { | Callbacks:
|
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()
}}
// ...
/>
Property | Type | Description |
---|---|---|
zoom | number | Current zoom level. |
maxZoom | number | Maximum zoom level. |
offsetX | number | Horizontal offset. |
offsetY | number | Vertical offset. |
disabled | boolean | 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.