Pure JavaScript image zoom that can be customized and invoked programmatically.
- Click to zoom in
- Press on the image for extra zoom-in and try moving around!
- Zoom into a higher resolution image if supplied
Install with your package manager:
npm install zooming --save
bower install zooming --save
Then load this module, e.g., via Browserify:
var Zooming = require('zooming')
Alternatively, download and include a script tag in your page.
Any image with attribute data-action="zoom"
is zoomable by default, for example:
<img src="img/sample.jpg" data-action="zoom" />
You can also define zoomable images in JavaScript:
Zooming.listen('.selector') // or
Zooming.listen(element)
Add data-original
attribute to supply a hi-res image when zooming in:
<img src="img/thumbnail.jpg" data-action="zoom" data-original="img/original.jpg" />
Attach click listeners to all matched images.
Open (zoom in) the matched image. Fires optional callback when the transition is done.
Close (zoom out) if currently zoomed-in.
Grab the current image given a mouse/touch position and apply extra zoom in.
x
,y
: Number. The point where the press happened.start
: Boolean. Indicate whether this is the initial grab (press mouse/finger down) or not.
Release the current image.
Takes an options object. Available options:
Option | Type | Default | Description |
---|---|---|---|
transitionDuration | String | .4s | Transition duration. More |
transitionTimingFunction | String | cubic-bezier(.4,0,0,1) | Transition timing function. More |
bgColor | String | #fff | Overlay background color. |
bgOpacity | Number | 1 | Overlay background capacity. |
scaleBase | Number | 1.0 | The base scale factor for zooming. By default scale to fit the window. |
scaleExtra | Number | 0.5 | The extra scale factor when grabbing the image. |
scrollThreshold | Number | 40 | How much scrolling it takes before closing out. |
onOpen | Function | null | A callback function that will be called when a target is opened and transition has ended. It will get the target element as the argument. |
onClose | Function | null | Same as above, except fired when closed. |
onGrab | Function | null | Same as above, except fired when grabbed. |
onRelease | Function | null | Same as above, except fired when released. |
onBeforeOpen | Function | null | A callback function that will be called before open. |
onBeforeClose | Function | null | A callback function that will be called before close. |
onBeforeGrab | Function | null | A callback function that will be called before grab. |
onBeforeRelease | Function | null | A callback function that will be called before release. |