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

ElevateZoom API you can get:

 var ezApi = $('#primaryImage').data('elevateZoom');

In order to enable/disable zoom you should use "changeState" method

 ezApi.changeState('enable'); // or disable

To detect change media query breakpoint you can use matchMedia

 var mq = window.matchMedia('(min-width: 768px)'); mq.addListener((b) => { if (b.matches) { // do something for screens > 768px, for example turn on zoom ezApi.changeState('enable'); } else { // do something for screens < 768px, for example turn off zoom ezApi.changeState('disable'); } });

Answer 2

try to

var image = $('#primaryImage');
var zoomConfig = {};
var zoomActive = false;

image.on('click', function(){

    zoomActive = !zoomActive;

    if(zoomActive)
    {
         image.elevateZoom(zoomConfig);//initialise zoom
    }
    else
    {
        $.removeData(image, 'elevateZoom');//remove zoom instance from image

        $('.zoomContainer').remove();// remove zoom container from DOM
    }
});

Other option

$('#primaryImage').click(function(){
   if($(window).width()>768){
        $(this).elevateZoom({
            zoomWindowPosition:1,
            zoomWindowOffetx: 5,
            zoomWindowWidth:$(this).width(), 
            zoomWindowHeight:$(this).height(),
        }); 
    }
    else{
        $.removeData($(this), 'elevateZoom');//remove zoom instance from image
        $('.zoomContainer').remove(); // remove zoom container from DOM
        return false;
    }
});

https://github.com/elevateweb/elevatezoom/issues/8

Answer 3

Try Disable/Comment Touch events in jquery.elevatezoom.js or jquery.elevateZoom version min (my version: 3.0.8) :

//touch events

            /* self.$elem.bind('touchmove', function(e){    
                e.preventDefault();
                var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];  
                self.setPosition(touch);

            });  
            self.zoomContainer.bind('touchmove', function(e){ 
                if(self.options.zoomType == "inner") {
                    self.showHideWindow("show");

                }
                e.preventDefault();
                var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];  
                self.setPosition(touch); 

            });     
            self.zoomContainer.bind('touchend', function(e){ 
                self.showHideWindow("hide");
                if(self.options.showLens) {self.showHideLens("hide");}
                if(self.options.tint && self.options.zoomType != "inner") {self.showHideTint("hide");}
            });     

            self.$elem.bind('touchend', function(e){ 
                self.showHideWindow("hide");
                if(self.options.showLens) {self.showHideLens("hide");}
                if(self.options.tint && self.options.zoomType != "inner") {self.showHideTint("hide");}
            });     
            if(self.options.showLens) {
                self.zoomLens.bind('touchmove', function(e){ 

                    e.preventDefault();
                    var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];  
                    self.setPosition(touch); 
                }); */

Answer 4

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; } }

Answer 5

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 6

Or you could just hide .zoomContainer using media queries?

For example:

@media screen and (max-width: 425px) {
    .zoomContainer {
        display: none;
    }
}

Answer 7

I was having the same issue so I edit my js file and put a if, else condition on it. This condition will act similar as CSS media query.

//JQUERY CODE

if (window.matchMedia('(min-width: 500px)').matches) {
        jQuery.fn.elevateZoom.options = {
            zoomEnabled: true
        }
}else{
        jQuery.fn.elevateZoom.options = {
            zoomEnabled: false
        }
}

Answer 8

If you tried everything and nothing works for you, try a CSS cover (it works perfect for me)

In your HTML:

<figure class="product-main-image">
    <div class="product-zoom-cover">&nbsp;</div>
    <img id="product-zoom" src="............">
</figure>

In your CSS:

.product-zoom-cover{
    display: none;
}
@media screen and (max-width: 768px) {
    .product-main-image{
        position: relative;
    }
    .product-zoom-cover{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 48;
    }
}

Success to all and good code!

Answer 9

For those who still come from search engines to this topic, The best way to manage every option (like enable / disable on mobile) in different sizes is using plugin`s documentation ! Here we go:

First you have to manage global options for elevatezoom:

jQuery('.mainproimg').ezPlus({
easing: true,
lensFadeIn: 200,
lensFadeOut: 200,
zoomWindowFadeIn: 200,
zoomWindowFadeOut: 200,
zoomWindowPosition: 11,
zoomWindowWidth: 400,
zoomWindowHeight: 400,
borderSize:1,
responsive: true
});

Then add the following code:

respond: [
            {
                range: '320-991',
                enabled: false,
                showLens: false
            }
        ]

So, the whole code would be:

jQuery('.mainproimg').ezPlus({
easing: true,
lensFadeIn: 200,
lensFadeOut: 200,
zoomWindowFadeIn: 200,
zoomWindowFadeOut: 200,
zoomWindowPosition: 11,
zoomWindowWidth: 400,
zoomWindowHeight: 402,
zoomWindowOffsetY: -8,
borderSize:1,
responsive: true,
enabled: true,
showLens: true,
respond: [
            {
                range: '320-991',
                enabled: false,
                showLens: false
            }
        ]
});

In this case, elevatezoom will be disabled on devices that has 320px to 991px width. Of course you can add more ranges and manage plugin options for each breakpoint.

Answer 10

unbind touchmove from element

  $('#img-product-zoom').unbind('touchmove');

and then hide the container of zoom area

  $('.ZoomContainer').hide();

use this code to detect mobile phone

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
///here put your code
}