Unable to scroll down the page through image

[kinup]

When I'm using zoom functionality, its working perfectly fine but I am not able to scroll down the page through image. The page doesnot scroll down when trying to scroll through image. Please help!!!

[Mithgol]

Works for me (i.e. I can scroll the page by using the mouse's wheel when the cursor is on a zoomed image) in Firefox 29.0.1 on Windows 7 Professional Service Pack 1 64-bit.

I tested it on http://www.jacklmoore.com/zoom/

[kinup]

Works fine on desktop but doesn't work on mobile devices.

I am using swipe slider on that I am using this zoom functionality. On mobile when i try to scroll down the page through image i am not able to do that.

Also if I comment this .on('touchmove.zoom', function (e) { e.preventDefault(); zoom.move( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] ); });

its scroll through image but then image doesnt move inside scroll area on mosemove it only zoom the the portion of image where its clicked.

Please Help. I'm badly stuck in it.

Thanks.

On Wed, Jun 11, 2014 at 11:27 PM, Mithgol [email protected] wrote:

Works for me (i.e. I can scroll the page by using the mouse's wheel when the cursor is on a zoomed image) in Firefox 29.0.1 on Windows 7 Professional Service Pack 1 64-bit.

I tested it on http://www.jacklmoore.com/zoom/

— Reply to this email directly or view it on GitHub https://github.com/jackmoore/zoom/issues/53#issuecomment-45776579.

[Mithgol]

Let's experiment further. What if you comment only the e.preventDefault() part?

[kinup]

Ya it works fine for me. Thanks a ton. Thanks alot. If anything will let u know. Thanks for immediate help.

Thanks.

On Thu, Jun 12, 2014 at 11:51 AM, Mithgol [email protected] wrote:

Let's experiment further. What if you comment only the e.preventDefault() part?

— Reply to this email directly or view it on GitHub https://github.com/jackmoore/zoom/issues/53#issuecomment-45833981.

[kinup]

Its working fine but coz of scroll coming while zooming not able to properly zoom.

Is there any way that i disable the scroll while zooming and enable it after zoomout.

PLease help....

On Thu, Jun 12, 2014 at 12:01 PM, kiran patel [email protected] wrote:

Ya it works fine for me. Thanks a ton. Thanks alot. If anything will let u know. Thanks for immediate help.

Thanks.

On Thu, Jun 12, 2014 at 11:51 AM, Mithgol [email protected] wrote:

Let's experiment further. What if you comment only the e.preventDefault() part?

— Reply to this email directly or view it on GitHub https://github.com/jackmoore/zoom/issues/53#issuecomment-45833981.

[kinup]

Please Help. I'm badly stuck in it.

[kinup]

the problem is while zooming inside its calling on touchmove function and when scrolling through the image also its calls touchmove so putting e.preventDefault(); disables the scroll for the entire page. Putting e.preventDefault(); on click doesnot work... PLease help...........

[Mithgol]

Okay, I've got another idea: jQuery Zoom homepage mentions that you may set onZoomIn and onZoomOut callbacks. What if you use these callbacks to trigger some boolean variable and then use its value to determine if e.preventDefault() is necessary?

[kinup]

Can u please explain in detail?

On Fri, Jun 13, 2014 at 3:03 AM, Mithgol [email protected] wrote:

Okay, I've got another idea: jQuery Zoom homepage http://www.jacklmoore.com/zoom/ mentions that you may set onZoomIn and onZoomOut callbacks. What if you use these callbacks to trigger some boolean variable and then use its value to determine if e.preventDefault() is necessary?

— Reply to this email directly or view it on GitHub https://github.com/jackmoore/zoom/issues/53#issuecomment-45950922.

[Mithgol]

• Use onZoomIn: function(){ zooming = true } and onZoomOut: function(){ zooming = false } to manipulate some global boolean variable (zooming) and store the zooming state.
• Then use if (zooming) e.preventDefault() instead of e.preventDefault(), it might prevent scrolling when zooming.

[eitan-i]

Hi Mithgol, I've just encountered the same issue in my app (can't scroll on mobile).

I've tried your last suggestion and it didn't work for me. is there something new with this ?

Thanks!

[Mithgol]

Unfortunately, that's all I've got; I don't have any other ideas to discuss.

[kevin-jones]

I'm looking into this same issue to prevent touch screen users activating the zoom when trying scrolling past the image. It's a real user experience issue that needs a solution.

I'm proposing a new mode whereby touch screen users must tap once to activate 'zoom mode' before they touch the screen again to move the zoom view.

This is how some other image zoom tools seem to work and I'm not sure there's a better way for touch screens.

I'll submit a PR soon hopefully.

[docus]

Maybe we need disable plugin on using mobile device?

[Grawl]

Any progress on this? @kevin-jones proposal sounds as a native experience.

[Mithgol]

As three months of silence can tell us quite obviously, there's no visible progress on this.

Therefore, if someone is willing to implement that good idea of @kevin-jones and has some time for that — well, you're welcome.

[jamaica929]

you can use this style {{touch-action: initial;}}

[Mithgol]

Currently the W3C spec of touch-action does not seem to define initial value for that property. Where is the standard (or the draft) that declares it?

[duncancoppedge]

There's a workaround if you're ok using click instead of grab. Switch on: to 'click' and use the update here (thanks to @seiz ) https://github.com/seiz/zoom/commit/cbe71099619088edd5935b67391947cf926c4978 RE #115

(function ($) {
	var defaults = {
		url: false,
		callback: false,
		target: false,
		duration: 120,
		on: 'click', // other options: grab, click, toggle
		touch: true, // enables a touch fallback
		onZoomIn: false,
		onZoomOut: false,
		magnify: 1
	};