CODEWITHSUNDEEP
javascriptjqueryhtmlcss
HDP
HDP

Reputation: 4221

Disable Zoom effect on Hover for Mobile devices in elevateZoom

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?

Upvotes: 9

Views: 14935

Answers (10)

Hootan.Ghiasi
Hootan.Ghiasi

Reputation: 99

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
}

Upvotes: 0

Pouya DN
Pouya DN

Reputation: 11

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.

Upvotes: 0

Fernando
Fernando

Reputation: 1124

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!

Upvotes: 0

Saeidhp
Saeidhp

Reputation: 89

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.

Upvotes: 2

SyntaxLogics
SyntaxLogics

Reputation: 1

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

Upvotes: 0

dgreen22
dgreen22

Reputation: 398

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

Upvotes: 2

Fabio Sodre
Fabio Sodre

Reputation: 349

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); 
                }); */

Upvotes: 3

Wikus
Wikus

Reputation: 65

Or you could just hide .zoomContainer using media queries?

For example:

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

Upvotes: 0

Tomm
Tomm

Reputation: 153

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

Upvotes: 6

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

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

Upvotes: 2

Related Questions