Image resizing using mouse wheel (pinch to zoom) + drag scrollable image (as well as any HTML content)
Home Page: https://worka.github.io/vanilla-js-wheel-zoom
License: MIT License
If I try to instantiate two different WZooms I get odd behaviour
A = WZoom.create('#thing1')
B = WZoom.create('#thing2')
Any idea how this could be fixed?
When attempting to run our tests that import the library throws an error in wheel-zoom.js.
Details:
C:\Development\angular\node_modules\vanilla-js-wheel-zoom\src\wheel-zoom.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import {
^^^^^^
SyntaxError: Cannot use import statement outside a module
11 | import { Actions, EffectsModule } from '@ngrx/effects';
12 | import { filter, take, takeUntil, tap, withLatestFrom } from 'rxjs';
> 13 | import WZoom from 'vanilla-js-wheel-zoom';
| ^
14 | import { ofZoomDown } from './zoom-down-action-creator';
15 | import { ofZoomUp } from './zoom-up-action-creator';
16 |
at Runtime.createScriptFromCode (../../../../node_modules/jest-runtime/build/index.js:1728:14)
at Object.<anonymous> (../../framework/src/lib/directives/zoom-and-pinch/zoom-and-pinch.directive.ts:13:1)
We think that a possible cause is because typings are missing.
We have no problem doing a PR to fix it, but we're not sure what caused the error.
In my use case, users can drag the picture out of the designated area, which makes it harder to use for first-time users.
In the demos in the Readme, there is no such issue. For instance, I am not able to drag the picture anymore to the left after the right edge of the picture is at the right border of the container. This is also similar to how Photos work in Windows 10, and that is the desired behavior for me.
What could be the reason of this behavior?
Importing the library like this way...
import WZoom from 'vanilla-js-wheel-zoom'
I have this error:
Error: Cannot find module '/src/wheel-zoom.js'. Please verify that the package.json has a valid "main" entry
Do you know why this happens?
I think the 'main' entry is correct.
Hello,
Probably it is not an issue. But could you please let me know how is it better to update wzoom parameters or object to use it for the rotated images? I mean that initially, the image is horizontal, like 800x600 px. Then I use css transform rotate style (interaction with the user) and the image becomes vertical, like 600x800 px. And then the wzoom doesn't work properly due to the size was changed. And what do I need to do to update wzoom? Does it make sense?
Thank you in advance.
Best regards,
Igor
TypeScript folk of vanilla-js-wheel-zoom, with ES Modules and UMD support.
Hey there,
Thanks for this great lib!
We use this in a special way and have a small issue.
Whenever the user is dragging the image we zoom in. On release we zoom out.
const zoom = WZoom.create(zoomImage, { dragScrollableOptions: { onGrab: function (e) { zoomImage.style.cursor = "grabbing"; zoom.maxZoomUp(); }, onDrop: function () { if (zoom.content.currentScale === 1) { zoomImage.style.cursor = "grab"; } else { zoomImage.style.cursor = "zoom-in"; } zoom.maxZoomDown(); }, }, zoomOnClick: false, disableWheelZoom: true, maxScale: defaultOptions.maxZoom, minScale: defaultOptions.minZoom });
It would be great to zoom into the image on this position where the user starts grabbing.
Any idea how to solve it with the existing version? Or any chance to get this feature?
I've just tried your lib (version 6.10.1) and this warning in showing up in console
It's present on your demo page too
https://worka.github.io/vanilla-js-wheel-zoom/demo-image.html
[Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
I can see, when the widget is created, listeners are attached to this.content.$element
on(this.content.$element, 'wheel', this._wheelHandler);
if (this.options.zoomOnClick) {
on(this.content.$element, this.events.down, this._downHandler, this.events.options);
on(this.content.$element, this.events.up, this._upHandler, this.events.options);
}
But when widget is destroyed, they are removed from this.window.$element, which is incorrect
off(this.window.$element, 'wheel', this._wheelHandler);
if (this.options.zoomOnClick) {
off(this.window.$element, this.events.down, this._downHandler, this.events.options);
off(this.window.$element, this.events.up, this._upHandler, this.events.options);
}
Finally, when user tries to scroll after destroying the widget, there are errors in the console
vanilla-js-wheel-zoom.js?@@buildnumber:717 Uncaught TypeError: this._computeNewScale is not a function
at WZoom._wheelHandler (vanilla-js-wheel-zoom.js?@@buildnumber:717)
If a visitor has it's browser to scale 200% or so, the popup does not open with the full image in view. And you can't get it completely in sight.
Can this be helped ?
This script is terrific. I'm using it in a custom lightbox.
Although my main interest is to view very large images with particular interest to be seen up close, it is not known ahead of time which images will be shown in it, so some small images will inevitably also be loaded. I do not want the small images (or the large ones) to be zoomed into pixels, so the maxScale option is very handy.
However I have noticed that if the viewport is larger than the (image * maxScale), there is odd behavior:
I would have expected that if the image is smaller than the viewport (at max scale), it would be loaded at max scale and centered, with further zoom-in attempts doing nothing (because it's already at max scale).
Is this a known issue/unsupported? Or does it sound like I have done something strange?
For reference, this is effectively how I have it loaded.
<style>
#myViewport {
height: 100%;
width: 100%;
background-color: darkkhaki;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
#myViewport img {
cursor: grab;
position: absolute;
}
</style>
<script src="/assets/js/wheel-zoom.min.js"></script>
<div id="myViewport">
<img id="myContent" src="" alt="image" />
</div>
<script>
var zoomContent = document.getElementById('myContent');
WZoom.create('#myContent',{
type: 'image',
zoomOnDblClick: true,
smoothTime: 0,
maxScale: 1,
dragScrollableOptions: {
onGrab: function () {
zoomContent.style.cursor = 'grabbing';
},
onDrop: function () {
zoomContent.style.cursor = 'grab';
}
}
}); /**/
</script>
To reproduce
goto: https://worka.github.io/vanilla-js-wheel-zoom/demo-image.html
Click in the far upper right of the image box, so in the gray area. Now try to drag the image, you should only be able to drag the image left-right, it should be "stuck" when trying to drag vertically. I think that is because the transform is outside the bounds set in the draggable limits
I think the following change
vanilla-js-wheel-zoom/src/wheel-zoom.js
Line 193 in 8af2bfd
var maxAvailableLeft =
(contentNewWidth - window.originalWidth) / 2 +
content.correctX;
var maxAvailableTop =
(contentNewHeight - window.originalHeight) / 2 +
content.correctY;
if (contentNewLeft < -maxAvailableLeft)
contentNewLeft = -maxAvailableLeft;
if (contentNewLeft > maxAvailableLeft)
contentNewLeft = maxAvailableLeft;
if (contentNewTop < -maxAvailableTop)
contentNewTop = -maxAvailableTop;
if (contentNewTop > maxAvailableTop)
contentNewTop = maxAvailableTop;I've seen you have a index.d.ts which, to me, means that your library supports types for TS.
when using
import WZoom from 'vanilla-js-wheel-zoom'
const wzoom = WZoom.create(img, { maxScale: 10, speed: 5 })
the inferred type of wzoom is any
and when using
import WZoom from 'vanilla-js-wheel-zoom'
const wzoom: WZoom = WZoom.create(img, { maxScale: 10, speed: 5 })
I get the error : Cannot use namespace 'WZoom' as a type
with
import WZoom from 'vanilla-js-wheel-zoom'
const wzoom: InstanceType<typeof WZoom> = WZoom.create(img, { maxScale: 10, speed: 5 })
the inferred type of wzoom is still any
I am not sure what is the proper way to do this
when i change minscale to 2 then it load image from center, how can i position it as y coordinate of image to zero,
i mean default image load position of ycoordinate of image to 0, so that it will show the top portion of image.
In this line:
options.smoothTime = Number(options.smoothTime) || wZoomDefaultOptions.smoothTime;Has something problem, since smoothTime option value can set to be 0, but the || operator means check "falsely" (false == 0), so if we set that the 0, || operator will assume that the value is false lead to be apply default value.
So I think we could use ?? operator, who will check undefined or null instead of the "falsely".
Fix:
options.smoothTime = Number(options.smoothTime) ?? wZoomDefaultOptions.smoothTime;Thanks for vanilla-js-wheel-zoom, exactly what I was looking for.
But it works better for me, when I modify it to zoom exponentially, instead of linearly.
Because as you zoom in more and more, with the linear (normal) version, the zoom factor decreases.
While with the exponential version, the zoom factor stays constant.
Here is a quick comparison/demonstration: wzoom-exponential-test.zip
I don't use Git but here is the diff: exponentialzoom.patch.txt
In the minified version I replaced +this.direction/this.options.speed with *Math.pow(this.options.speed,this.direction).
Anyway, hopefully this is useful for someone else.
Hello,
I've been testing a lot this past day and I believe the plugin only allows touch or mouse events, never both simultaneously.
Because we have touchscreens, do you think it's possible to allow both simultaneously? It's good also for testing in the Chrome simulator.
I am trying to change the image source file of a wzoom.
For every time I change the image.src it seems to make the drag more and more sensitive.
I have also tried destroying the wzoom, changing the img.src, and then re-creating the wzoom. When I do this I get the following error
Uncaught TypeError: this._prepare is not a function
at j._init (wheel-zoom.min.js:1)
Thoughts on how I could accomplish changing the img.src while using a wzoom?
when i use the
Hi,
So I have a carousel of images where a user clicks next to go to the next image. The zoom appears to work when I specify the active image element. But I tried setting the variable to null (to make sure the garbage collection removes it) and re-initialising it when image switches to next one but seems to break in this scenario. Possibility of a .destroy() method?
There is a conflict between vanilla-js-wheel-zoom script and the zoom CSS descriptor (also -moz-transform: scale). If you use the zoom CSS descriptor (or -moz-transform: scale) to resize elements of a page, the zoom loses it's position when you zoom an element, which makes the image move/disappear outside the container. As a temporary workaround I set the new positions to zero so that it always zooms from the center.
Also, is there a way to send variables into the script? My images are displayed in a loop and I need to send the loop index into the script in order to save the new x,y and scale values into localStorage. Thanks!
Hi,
I think this is amazing, but I've been having a small problem integrating it into my site. I'd like to have it so the user can double click (or double tap) on mobile to zoom the picture all the way in, or zoom it all the way out. However, when users on mobile go to scale the image manually using two fingers, it's triggering the double tap event, and zooming it all the way in, essentially making it so people on mobile can't manually scale.
Is there an easy fix for this? I'd also love it if double tapping would always zoom the image all the way out if the image is already partially zoomed, and only zoom all the way in if the image is at its native scale. Not sure if this is possible with the current system!
Similarly, I'd also like to make it so users can single tap the image to get rid of it. However, that currently seems pretty tricky to do as just using listeners, as it's pretty hard to tap without dragging even slightly. I guess it'd be easy to do a workaround if you could get the start co-ordinates and end co-ordinates of the tap, so you could write a bit of leeway in, but I'm not sure if that sort of information about the image is freely available? (aha, never mind for this one - just found changedTouches[0].clientx in the event - I'm guessing I can use that)
Thanks for the great tool!
Ian
Hi, thanks for a nice library!
I would suggest to also allow passing the element itself into the WZoom.create() - my use case is that I don't have any fixed selector / ID to my img elements. I can create random ID a put it there but this seems like an unnecessary workaround.
Hi,
I'm trying to use this plugin on the page to zoom the image. But when I moving the zoomed image on the mobile it moves the whole HTML page, not the image only. Could you please fix it? Or help me how to do it?
And is it possible to zoom on the mobile browser using 2 fingers?
Thanks in advance.
Best regards,
Igor
Hello! I'm using your library and it's working great!
I saw you have an option to zoom fully on one click, but it's pretty confusing. Nowadays in most images previews we can "enter in zoom mode" when we double click/tap an image.
It would be cool to have a configurable handler in your lib to do that, for example when we double tap the image it just does a zoomUp() and I think that's it.
Thanks!
I want to scale only image. Image size is 2082x2596. Visible layout is 960x1024.
Here are my html and less.
<div class="zoom-window-container">
<div id="zoomWindow" class="zoom-window" style="cursor: grab;">
<img id="metroMap" class="zoom-window__content" src="/uploads/media/metro_timeline/0002/19/87e3974caeaadc5b849f9aed330b07a9c1beb3da.png" style="transform: translate3d(0px, 0px, 0px) scale(0.461095);">
</div>
</div>less
.zoom-window-container {
position: relative;
display: block;
padding: 0;
overflow: hidden;
width: 960px;
height: 1204px;
.zoom-window {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
.zoom-window__content {
position: relative;
display: flex;
align-items: center;
}
}
}I coped this from https://worka.github.io/vanilla-js-wheel-zoom/demo-image.html
But when i click by zoom up, value of transform set up in translate3d(0px, -435.758px, 0px) scale(0.627762);
But in your example it is translate3d(0px, 0px, 0px)
Can you help? Where ir issue?
Hi worka,
any advice how to use your library to implement a Zoom to Width feature ?
"Zoom to Width" means making the image as wide as the viewport, maintaining the aspect ratio. It also aligns the top of the image to the top of the viewport.
It should behave the same way regardless of the original size of the image. Sometimes it will zoom in, sometimes it will zoom out
Zoom on the mobile browser using 2 fingers
Can you implement something similar to this feature available in panzoom
"Add class options.excludeClass (default is "panzoom-exclude") to whatever element you want to be clickable. Panzoom will check for this class before handling the event. Alternatively, add a reference to the element to the exclude option, or call event.stopImmediatePropagation() in an event handler on the clickable element."
Hi,
We would like to add wzoom to our app, but unfortunately, we're not very versed in frontend JS.
Would it be possible to ask you to help us create the single-page app?
Not for free, obviously :)
You can contact me on Telegram @velsa
P.S.
Sorry for leaving it as an issue, but that's the only way I found to get in touch with you )
You can remove this issue at any time.
Nice lib, works really well with html content, great work buddy!
Got a quick question, would it be possible to add a function to toggle wheelZoom after the script have ben initialised? My use case is that I want to require the user to press CMD (on mac) or CTRL (on WIN) to be able to zoom on scroll, if the meta button is not presset I would like the mouse wheel to work like it normally do.
Cheers,
Jonathan
Hi, I'd like to use this but I'm unsure of the license terms. Could you add a LICENSE file?
Hello! We appreciate your work for this lib.
I was wondering if you can add some sort of callback when the max or min scale is reached, for example:
onMaxScaleReached(() => // I want to do something here)
With this feature we give to the lib users the possibility of enabling or disabling the zoom in/out buttons when those events happen which is the use case that I need.
Thanks!
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.