Image Resizing Using Mouse Wheel + Drag Scrollable Image

vanilla-js-wheel-zoom

Image resizing using mouse wheel + 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

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 “window” in which scaling will take place. The “window” 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 “window” must be one. In the example with “badge” below, it will be more clear what is meant.

Demo (only one image)

Demo (html)

Install

npm i vanilla-js-wheel-zoom

or

yarn add vanilla-js-wheel-zoom

Get started

#myWindow {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #999;
}

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

<div id="myWindow" style="width:600px;height:600px;">
    <img id="myContent" src="https://placehold.it/2400x1400" alt="image" />
</div>

WZoom.create('#myContent');

Default params

var defaults = {
    // type content: `image` - only one image, `html` - any HTML content
    type: 'image',
    // for type `image` computed auto (if width set null), for type `html` need set real html content width, else computed auto
    width: null,
    // for type `image` computed auto (if height set null), for type `html` need set real html content height, else computed auto
    height: null,
    // drag scrollable image
    dragScrollable: true,
    // options for the DragScrollable module
    dragScrollableOptions: {
        // smooth extinction moving element after set loose
        smoothExtinction: false,
        // callback triggered when grabbing an element
        onGrab: null,
        // callback triggered when moving an element
        onMove: null,
        // callback triggered when dropping an element
        onDrop: null
    },
    // minimum allowed proportion of scale
    minScale: null,
    // maximum allowed proportion of scale
    maxScale: 1,
    // image resizing speed
    speed: 10
};

Badge on the image

#myWindow {
    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="myWindow" style="width:600px;height:600px;">
    <div id="myContent">
        <div id="myBadge" style="left:900px;top:500px;">Badge</div>
        <img id="myImage" src="https://placehold.it/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();
});

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	Integer	null	For type image computed auto (if width set null), for type html need set real html content width, else computed auto.
height	Integer	null	For type image computed auto (if height set null), for type html need set real html content height, else computed auto.
dragScrollable	Boolean	true	If true - scaled image can be dragged with the mouse to see parts of the image that are out of scale.
dragScrollableOptions.smoothExtinction	Boolean	false	If true - smooth extinction moving element after set loose.
dragScrollableOptions.onGrab	Function	undefined	Сalled after grabbing an element.
dragScrollableOptions.onMove	Function	undefined	Called on every tick when moving element.
dragScrollableOptions.onDrop	Function	undefined	Сalled after dropping an element.
minScale	Integer	null	The minimum scale to which the image can be zoomed.
If falsy or greater than maxScale then computed auto.
maxScale	Integer	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	Integer	10	Step with which the image will be scaled. Measured in relative units.
The larger the value, the smaller the step and vice versa.
prepare	Function	undefined	Сalled after the script is initialized when the image is scaled and fit into the container.
rescale	Function	undefined	Сalled on every change of scale.

API

name	note
.prepare()	Reinitialize script
.zoomUp()	Zoom on one step (see option speed)
.zoomDown()	Zoom out on one step (see option speed)

Download Details:

Author: worka

Demo: https://worka.github.io/vanilla-js-wheel-zoom/

Source Code: https://github.com/worka/vanilla-js-wheel-zoom

#javascript #html