Disable Zoom effect on Hover for Mobile devices in elevateZoom

Question

when you check the elevateZoom on Mobile, the page scroll option does not work when we click on the image although we off the zoom option. which is a trouble.

We want to disable zoom option for Mobile devices or responsive sizes.

Is there any value or variable we can use to ONLY disable Zoom effect completely for mobile devices?

Can anyone suggest how to do this or if someone did it for their theme in past?

Answer 1

In js plugin add this option

touchEnabled: false,

With this option in desktop PC image will be zoom and in mobile device, zoom will be disabled.

Answer 2

Best Answer I've found and easiest from here: https://github.com/elevateweb/elevatezoom/issues/102#issuecomment-255942134

@media(max-width: $tablet-max) { /* The image that has zoom on it */ .product__img { pointer-events: none; } }