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:
|
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.