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)

npm i vanilla-js-wheel-zoom

or

yarn add vanilla-js-wheel-zoom

#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');

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

#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,
});

<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();
});

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

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

Try this 😉 (and see demo)

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

See demo

Have some fun 🤸‍♂️

MIT