vanilla-js-wheel-zoom

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

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

API

License

MIT