Skip to content

Image resizing using mouse wheel (pinch to zoom) + drag scrollable image (as well as any HTML content)

License

Notifications You must be signed in to change notification settings

worka/vanilla-js-wheel-zoom

Repository files navigation

vanilla-js-wheel-zoom

Image resizing using mouse wheel (pinch to zoom) + drag scrollable image (as well as any HTML content)

GitHub tag (latest by date) GitHub stars GitHub issues GitHub forks

Advantages:

  • the ability to fit the image into a container of any proportion
  • the ability to scale any HTML content
  • touch screen devices support

Starting with version 5, the plugin switched to using style transform. To use the plugin in older browsers, switch to earlier versions.

You need to center the image (or any HTML content) in the "viewport" in which scaling will take place. The "viewport" is taken automatically as the parent of the image in DOM.

HTML content can be of any structure, but the topmost child element in the “viewport” must be one. In the example with "badge" below, it will be more clear what is meant.

🖐 If you find my plugin helpful, please donate me 🤝

Demo (only one image)

Demo (multi images)

Demo (html)

Install

npm i vanilla-js-wheel-zoom

or

yarn add vanilla-js-wheel-zoom

Get started

#myViewport {
    display: flex;
    align-items: center;
    justify-content: center;
}
<div id="myViewport" style="width:600px;height:600px;">
    <img id="myContent" src="https://via.placeholder.com/2400x1400" alt="image" />
</div>
WZoom.create('#myContent');

Syntax & Parameters

/**
 * Create WZoom instance
 * @param {string|HTMLElement} selectorOrHTMLElement
 * @param {Object} [options]
 * @returns {WZoom}
 */
const wzoom = WZoom.create(selectorOrHTMLElement[, options]);

Badge on the image

#myViewport {
    display: flex;
    align-items: center;
    justify-content: center;
}

#myBadge {
    position: absolute;
    border: solid 2px red;
    font-size: 80px;
}

#myImage {
    width: auto;
    height: auto;
    margin: auto;
}
<div id="myViewport" style="width:600px;height:600px;">
    <div id="myContent">
        <div id="myBadge" style="left:900px;top:500px;">Badge</div>
        <img id="myImage" src="https://via.placeholder.com/2500x1500" alt="image"/>
    </div>
</div>
WZoom.create('#myContent', {
    type: 'html',
    width: 2500,
    height: 1500,
});

Control buttons

<button data-zoom-up>Zoom Up</button>
<button data-zoom-down>Zoom Down</button>
const wzoom = WZoom.create('img');

document.querySelector('[data-zoom-up]').addEventListener('click', () => {
    wzoom.zoomUp();
});

document.querySelector('[data-zoom-down]').addEventListener('click', () => {
    wzoom.zoomDown();
});

On window resize

const wzoom = WZoom.create('img');

window.addEventListener('resize', () => {
    wzoom.prepare();
});

How to rotate the image?

Try this 😉 (and see demo)

Callbacks onMaxScaleReached() / onMinScaleReached()

There are no such, but you can get the desired behavior (and see demo)

Saving image state on page reload

See demo

Playground...

Have some fun 🤸‍♂️

Options

name type default note
type String image image - if you need to scale only one image. In this case, there is no need to pass the parameters width and height. html - if you need to scale the HTML code. It is advisable to specify the parameters width and height that correspond to the original full size of the HTML content.
width Number null For type image computed auto (if width set null), for type html need set real html content width, else computed auto.
height Number null For type image computed auto (if height set null), for type html need set real html content height, else computed auto.
minScale Number null The minimum scale to which the image can be zoomed.
If falsy or greater than maxScale then computed auto.
maxScale Number 1 The maximum scale to which the image can be zoomed.
1 means that the image can be maximized to 100%, 2 - 200%, etc.
speed Number 1.1 Factor with which the image will be scaled.
The larger the value, the larger the step.
Can tend to 1, but should not be equal to it (ex. 1.05, 1.005) or can be greater (ex. 1.5, 2, 5, 10)
zoomOnClick Boolean true Zoom to maximum (minimum) size on click.
zoomOnDblClick Boolean false Zoom to maximum (minimum) size on double click. If true then zoomOnClick = false
prepare Function undefined Called after the script is initialized when the image is scaled and fit into the container. Gets WZoom instance as the first argument.
rescale Function undefined Called on every change of scale. Gets WZoom instance as the first argument.
alignContent String center Align content center, left, top, right, bottom
smoothTime Number .25 Time of smooth extinction. if 0 then no smooth extinction. Disabled for touch devices. (value in seconds)
disableWheelZoom Boolean false
reverseWheelDirection Boolean false Reverse wheel zoom direction
dragScrollable Boolean true If true - scaled image can be dragged with the mouse to see parts of the image that are out of scale.
smoothTimeDrag Number smoothTime Optional override to smoothTime for mouse drag/pan actions.
Setting low (or 0) allows fluid drag actions, while maintaining zoom-smoothness from higher smoothTime.
If not provided, matches whatever smoothTime resolves to: smoothTime's provided value or its default.
onGrab Function undefined Called after grabbing an element. Gets the event and WZoom instance as the arguments.
onMove Function undefined Called on every tick when moving element. Gets the event and WZoom instance as the arguments.
onDrop Function undefined Called after dropping an element. Gets the event and WZoom instance as the arguments.

API

name note
.prepare() Reinitialize script
.transform(top, left, scale) Rebuild content state with passed params
.zoomUp() Zoom on one step (see option speed)
.maxZoomUp() Zoom to max scale
.zoomDown() Zoom out on one step (see option speed)
.maxZoomDown() Zoom to min scale
.zoomUpToPoint({x, y}) Zoom on one step to point (see option speed)
.zoomDownToPoint({x, y}) Zoom out on one step to point (see option speed)
.maxZoomUpToPoint({x, y}) Zoom to max scale to point
.destroy() Destroy object

License

MIT