jackmoore / wheelzoom Goto Github PK
View Code? Open in Web Editor NEWA small script for zooming IMG elements with the mousewheel/trackpad.
Home Page: http://www.jacklmoore.com/wheelzoom
License: MIT License
A small script for zooming IMG elements with the mousewheel/trackpad.
Home Page: http://www.jacklmoore.com/wheelzoom
License: MIT License
Hello,
I use your code with a iPad and i can't zoom with my fingers. Do you have a solution ?
Thanks
the first picture (in dom) works, the others not.
On change of image-size the script needs to recalculate the width/height of the image. Currently the background size stays the same.
A typical usecase is having a responsive image like max-width: 100%; height: auto;
.
Hi
I want use both wheelzoom and highslide (http://highslide.com/)
Who can help me?
The source contains this statement (line 146):
console.log(originalProperties);
It appears to be forgotten debug code.
This js seem only working first image if have more image.
This project is really great and simple. Anyway, downloading and adding JS-files manually is very old fashioned and, depending on the project, not a good practice. Instead it would be great to install with a package manager(like npm) and be able to import the module and have TypeScript definitions.
If this project is inactive and someone wants to fork this repository and rewrite in ES6 or TypeScript he is very much welcome!
Hi Jack,
I have managed to combine a fancybox css (no jquery) and html with your wheelzoom, which works perfectly when I have the div/image on display: block; (so visible).
Except, when I add a jQuery function to fadeIn the div/image, the wheelzoom doesn't get the right background-size which makes it 100px width and that isn't correct.
Please check http://office.prelicious.nl/builds/test/demo/ with the working file
And please check http://www.quintystexel.nl/eten-drinken for the broken file, click on the first image ('Quinty's Lunch')
Do you know the problem? I seriously can't find it :(
The only thing I've changed is, I made the div invisble (the overlay) and added a jQuery function to make it fade in when it's being triggered.
I've added some attachments, maybe you can find the problem there.
I've also chagned this line:
backgroundSize: width+'px '+height+'px',
To this (to match my fancybox css, this gives NO problems at all - this is not important but just so you know I've changed it):
backgroundSize: width+'px 100%',
I hope you can help me
When I add the wheel zoom in dynamic content as image within modal box, the image is already in zoomed state and I could not zoom in and zoom out the image. Nothing happens to the image. How to resolve this issue ?
This is the code I used :
`<!doctype html>
I populate image source with image path i got from ajax.
Something like
$('#image').attr('src', resultFromAjax);
Am i doing something wrong? :)
I have my images in divs using background image contain. As this plugin already uses background images to work, is it possible to use it where the picture is already a background image?
Hey there,
I love this script! Thanks for sharing!
Are there any plans for hosting it on npmjs.org? A npm package of this would be awesome!
I get this error in the console:
TypeError: Not enough arguments to EventTarget.removeEventListener.
Apparently that's because img.removeEventListener('wheelzoom.destroy'); is called without a second argument.
wheelzoom is great! A user wants to start with a zoomed-in version (e.g., centered, scale=2x) because
there is a list of images and each of them would require mouse actions.
I tried to fiddle around in the code, but it appears that the settings should be internally consistent,
i.e., not tampered by anything other than the pan/zoom events. It is possible that this requires an artifical rescaling event after the full load of an image (?). A possible approach would be to add, for instance, 'initialzoom: 2.0' to the wheelzoom() second argument. Any advice is greatly appreciated.
I am making a similar function of the picture zoom interface
How to achieve the same effect by changing top, left, and scale
I don’t know how to calculate the movement of the picture when it is zoomed out or zoomed in
The ratio of the picture (img) and the outer frame (div) (overflow: hidden) is not the same
html dom structure is like this
div {
width:1000px;
height:1000px;
overflow: hidden;
display: flex;
align-items: center; // child image vertical center
}
img{
width: 1000px;
height: 800px;
position: relative;
top: 0; // cagene this value
left: 0; // cagene this value
transform: scale(1); // cagene this value
}
<div>
<img src="image.jpg">
</div>
sorry my english is bad
Hey, I want to use this zooming mode on my canvas image. I have installed your npm library, but don't know what files need to be imported to make it run. And i wan to do this zooming on canvas, so how it can be done? Let me know what you think.
If you open your demo page and use the mouse wheel on the image, the point under the cursor doesn't move.
If you scroll the whole page down a bit and then use the mouse wheel on the image, the point under the cursor moves.
The more you scroll the page, the more dramatic the effect.
Latest Firefox, OS X.
Hi Jack,
this is more a feature request then an issue.
If you could add those lines of code at the end of the function updateBgStyle everyone could
listen to it and have the updated values at hand for further calculations.
var bgStyle = { "width": width, "height": height, "bgWidth": bgWidth, "bgHeight": bgHeight, "bgPosX": bgPosX, "bgPosY": bgPosY }; var event = new CustomEvent("wheelZoomUpdatedBgStyle", {detail: bgStyle}); document.dispatchEvent(event);
Thanks and keep on doing what you do :) It is a nice piece of code.
best,
ND
Hello, I need help.
I tried using the zoom percentage adjustment feature and it is not getting the new value received.
I followed the example:
Wheelzoom (document.querySelectorAll ('img'), {zoom: 0.05});
I changed the value of 'zoom: 0.05' to other values like '0.05', '0.50', '10.00' and others ... did not make any difference.
I tested by adding a new default variable to test with an 'Alert' inside the script and also did not change the value:
Wheelzoom (document.querySelectorAll ('img'), {direction: 5});
And added the default variable:
Window.wheelzoom = (function () {
Var defaults = {
Zoom: 0.10,
MaxZoom: false,
Direction: 1
};
Alert only shows '1' and not 5 assigned.
What could be the problem? Or what can I be doing wrong?
From now on, thank you very much for your contribution with this script, really very useful and has helped me a lot until now.
I am using wheelzoom and rotate js for my project. Both works well but when I rotate an image, the wheelzoom panning control gets reversed. How to solve this ?
Due to the way the background image is created
img.style.backgroundImage = "url('"+img.src+"')";
links with one or more single quotation marks (a valid non-encoded URI character) such as http://www.marsnjak.com/sergej/yemen/highres/402%20-%20Old%20San'a'.jpg will fail to show.
This is because the resulting concatenated string for such a URL is ill-formed
url('http://www.marsnjak.com/sergej/yemen/highres/402%20-%20Old%20San'a'.jpg')
Notice how the URL string is truncated to
http://www.marsnjak.com/sergej/yemen/highres/402%20-%20Old%20San
.
The fix is trivial: changing the aforementioned statement to
img.style.backgroundImage = 'url("'+img.src+'")';
should generate the intended string
url("http://www.marsnjak.com/sergej/yemen/highres/402%20-%20Old%20San'a'.jpg")
I'm using wheelzoom with your colorbox library.
When viewing a portrait image on a landscape screen (or vice versa), there is whitespace to the side of the image. For the unzoomed image, this is necessary to preserve the aspect ratio.
But when zooming in, it would be much more natural if the image could expand to fill the parent element, rather than being constrained to the original image size. Here, the whitespace is wasted - there is no reason why the image shouldn't expand horizontally.
Is it possible to modify the library so that the image is cropped to a parent, rather than its original size?
Hello,
I am trying this on both .JPEG and .PNG image and on .JPEG images it it working fine but on .PNG images it is not working.
can you tell why?
Hi,
facing issue with Sensefly Camera model images,
May I know why it's happening?
SenseflyIMage
I have a web page where several images are rendered in a tabbed view. On page load the image in the default tab is being processed correctly. However, when the tab is switched, the width and height values are corrupted, with width returning 80 and height returning NaN
.
I suspect the issue might arise from the fact that my images have no explicit width
and height
tag; rather, width and height are defined in CSS using width:80%; height: auto'. The return values from the CSS resemble the corrupted ones (80% and
auto-> 80 and
NaN. Perhaps the
getComputedStyle` function cannot parse the values correctly.
This is supported by the fact that when I declared width and height explicitly in the img
tag, the issue went away.
Is there a simpler way to use wheelzoom with colorbox?
I have a question about your wheel zoom plugin.
I'v used it with jquery colorbox, my pictures are fitted within the colorbox
It means i set the height and width to 100%, but beacuase some pictures are smaller than usual, they are not fitted vertically.
The real demand is that i want the picture to get bigger when i use mouse wheel(exactly like Windows photo viewer in windows OS),
it just zoom within the first dimention, and some part of picture will be hide while zoom,however, we have some more space to show the bigger picture.
my example page is on the following url :
http://ideamall.ir/Project/ViewPackage/?Id=17
sorry if my english writing is not so well!
thank you in advanced.
best regards.
Telephone: landscape: letters/background caption in the picture, but too small to read, portret: caption at bottom! Have tried a lot of things, found at GitHub/StackOverflow, problem more often occurred, but no solution works in my case!
http://www.veldfiets.nl/appelscha/
CCS:
.carousel-caption h5 {
display: inline-block;
padding: 10px;
background: rgba(0, 0, 0, 0.50);
border-radius: 10px;
P.s.: I added only: font-size: 2vw; in order to have some result (only landscape) but, on large
screen the letters are too big now. In portret, telephone: text still too small, bottom.
}
HTML:
wheelzoom and fancybox v3 seem to conflict with each other. When wheelzoom is added the first image wheel zooming works but when you go to the next slide it doesn't display.This doesn't happen when the wheelzoom is removed.
Any ideas why this is happening?
Regards.
**This is the html/body:
.. previous ..
<div class="carousel-item">
<img class="zoom d-block w-10" src="slides/slider-1.jpg" data-color="black" alt="foto">
<script src="wheelzoom.js"></script>
<script>
wheelzoom(document.querySelectorAll ('img.zoom'));
</script>
<div class="carousel-caption d-md-block">
<h5>Langwarder Groden, detail</h5>
</div>
</div> Etc., more slides to come. Thanks for any solution. P.s. the wheelzoom.js I dowloaded via Download/JackMoore-site.
Is is possible to get rid of image conversion to base64?
The only problem i found, zooming to a given value is not working for me.
wheelzoom(document.querySelectorAll('img'), {zoom:0.05});
I tried values like 0.05, 0.5, 1, 2, 40. They all behave the same, adding background-size with the value of the original size of the image. And wheelzoom is applied. So these two behave the same and the zoom value is not taking effect:
wheelzoom(document.querySelectorAll('img')};
wheelzoom(document.querySelectorAll('img'), {zoom:0.05});
I thought the second one is zooming in to the specified value (Max is 1 and equals the original image size), independently on mouse wheel interaction.
Even on a very simple page with one image inside body and no styling, i find the same issue.
I intended to use this in a React, jQuery, bootstrap carousel context and to add zooming buttons to toggle between different zoom levels. It would imply "destroy" and "wheelzoom" each time, which is doable, if the zoom value worked.
BTW, here they are wrong about how to use wheelzoom:
https://docs.omniref.com/github/jackmoore/wheelzoom/1.1.1
$('img').wheelzoom();
Thank you
Hi!
My problem is:
If I enlarge the image, the positioning with mouse is not smooth but jumpy.
I think the jump size is 1 pixel in the original image!
Thanx, Art
Bro, :D i love you, but i need a new feature in your plugin. Im working on a website, and i need to create my customized map. I need to create a panel with 2 buttons ( + AND - ) to zoomin and zoomout.
There is an example
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.