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 (html)

Demo (multi images with custom align)

Playground... Have some fun 🤸‍♂️

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;
    overflow: hidden;
    background: #999;
}

#myContent {
    position: relative;
    display: flex;
    align-items: center;
}

<div id="myViewport" style="width:600px;height:600px;">
    <img id="myContent" src="https://via.placeholder.com/2400x1400" alt="image" />
</div>

WZoom.create('#myContent');

Supported "hotswap" src of image (when type = image). You can do document.getElementById('myContent').src = "_new_path_" after initializing the plugin.

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;
    overflow: hidden;
    background: aqua;
}

#myContent {
    position: relative;
    display: flex;
    align-items: center;
}

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

#myImage {
    display: block;
    width: auto;
    height: auto;
    margin: auto;
    align-self: center;
    flex-shrink: 0;
}

<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)

Options

API

LICENSE

vanilla-js-wheel-zoom is licensed under the GPLv3 license for all open source applications. A commercial license is required for all commercial applications (including sites, themes and apps you plan to sell).