Zoom
Wheel, pinch, double tap, buttons and keys, anchored to the pointer.
Built-in images can be magnified up to maxScale times their fitted size. Zoom is on by default.
Live demo. Click a thumbnail to open it.
| Input | Action |
|---|---|
| Mouse wheel, trackpad pinch | Zoom around the pointer |
| Double click, double tap | Zoom to doubleTapScale at that point, or back to 1 |
| Two-finger pinch | Zoom around the fingers. Moving them pans. |
| Drag while zoomed | Pan, stopping where the image edge meets the stage edge |
| Zoom in and out buttons | Multiply or divide by step. Disabled at the limits. |
+, -, 0 | Same as the buttons. 0 resets. |
Options
<Lightbox zoom={{ maxScale: 4, step: 2, doubleTapScale: 2.5, wheel: false }} {...props} />Prop
Type
Behavior
- Zoom resets when the slide changes, the window resizes or the viewer closes.
- While zoomed,
sizesgrows to the magnified width, so the browser can switch to a sharpersrcSetcandidate. - Pinching past the limits meets resistance and settles back on release. Pinching under the fitted size from fit and letting go closes the viewer, unless
pinchToClose={false}. See Navigation and gestures. - A zoomed or pinched image flies back to its thumbnail from where it is on screen when the viewer closes.
- The root gets
data-zoomedwhile the image is magnified, and.eg-zoomgetsdata-gesturewhile a pinch, pan or wheel zoom follows the pointer. - Slides drawn by
render.slide, videos and embeds do not zoom. The zoom buttons are hidden on them.
zoom={false} turns all of it off.