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.
npm i vanilla-js-wheel-zoomor
yarn add vanilla-js-wheel-zoom#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');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,
// zoom to maximum (minimum) size on click
zoomOnClick: true
};#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
});<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();
});| 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. |
| zoomOnClick | Boolean | true |
Zoom to maximum (minimum) size on click. |
| 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. |
| name | note |
|---|---|
| .prepare() | Reinitialize script |
| .zoomUp() | Zoom on one step (see option speed) |
| .zoomDown() | Zoom out on one step (see option speed) |
| .destroy() | Destroy object |
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).
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent