search

jackmoore / zoom

jQuery plugin for zooming images on mouseover.
http://www.jacklmoore.com/zoom/
MIT License
1.54k stars 459 forks source link

My zoomed image wasn't moving around - but I found a fix! #54

Open wolfcheese opened 10 years ago

wolfcheese commented 10 years ago

This thread suggests that when calling .outerWidth() on an image, the developer is expecting a number to be returned instead of an object.

If this is the case for your site, this thread shares that this issue occurs depending on which combination of jQuery and jQuery UI you are using. It also shares a few fixes: either change .outerWidth() to .width(), or change it to outerWidth(false). So replace all the .outerWidth() calls in the javascript accordingly (I found only 2). Then replace all the .outerHeight() calls in a similar fashion (again I found only 2). After that, this plugin started working for me!

kinup commented 10 years ago

I tried doing it but doesn't work fo me on Mobile. I'm commenting e.preventDefault(); in .on('touchmove.zoom', function (e) so when I'm moving the zoomed image the page also starts scrolling coz of which unable to move the zoomed image properly.

If I uncomment e.preventDefault(); it prevents the page fro scroll even after i zoomedout of the image.

I need some solution in which i scroll only when i zoomedout out and when i zoomin the image it prevents the page from scroll.

echorashmi commented 4 years ago

6 years later and this fix still worked! Thanks for posting this here. I inherited an older site and was surprised to find JQuery Version 1.10.2 still in use 🤷

I changed outerWidth() and outerHeight() to outerWidth(false) and outerHeight(false) respectively, that did the trick. I think I'm still having an issue when deploying to Production, the width of my page is expanding and I'm not sure why. Only tested briefly on production before I disabled it, so I cannot test right now.