Disable Zoom effect on Hover for Mobile devices in elevateZoom

elevatezoom with fancybox
image zoom on hover like flipkart
elevatezoom codepen
jquery image zoom plus minus
zoom wrapper
ezplus
multi zoom js
product image zoom jquery free download

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?


ElevateZoom API you can get:

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

Disable Zoom effect on Hover · Issue #122 · elevateweb/elevatezoom, We are using this plugin in our WP theme: http://www.elevateweb.co.uk/image-​zoom We want to disable zoom option for Mobile devices or  Just hide the zoom container below a certain window size / for a viewport size. The zoom hover will not show. $('.zoomContainer').hide(); You can also remove the zoom container in mobile. And reinitialize on resize.


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

Elevatezoom breaks "swipe" events on mobile devices, The Elevatezoom lens disappears on mobile devices (which it should in Unfortunately this means hover zoom is lost below that breakpoint. Disable the zoom effect on the mobile device leaflet in elevateZoom advertisements 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.


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

Elevate Zoom, We want to disable zoom option for Mobile devices or responsive sizes. value or variable we can use to ONLY disable Zoom effect on hover? We want to disable zoom option for Mobile devices or responsive sizes. But when we do so, gallery also stop from working, which is a trouble. Is there any value or variable we can use to ONLY disable Zoom effect on hover?


Or you could just hide .zoomContainer using media queries?

For example:

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

Jquery Image Zoom Plugin Examples, Also you can pass a gallery to the lightbox. NEW: The imageCrossfade option will give a simultaneous fadein / fadeout effect on the zoom. SHOW THE CODE  Hey There, I'm urgently trying to remove elevateZoom just on mobile devices, does anyone have an easy way for me to do that? I've been searching the web for hours and can't seem to find anything to help! Thank you!!


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

Image zoom codepen, The hover feature is not supported on mobile devices. Canvas is To preserve image transparency, you should disable "Image fill color" option at the Gallery->​Properties->Images tab. So when the You create image zoom effect using css3 transitions. To do the zoom, we will add a javascript library called ElevateZoom​. over 4 years the page scroll option does not work on Mobile. over 4 years How to change img and zoom img on click event? over 4 years Zoomed image shows under on Safari and Chrome, runs OK on Firefox; over 4 years zoomContainer too small on safari 5.1.7 (Window) over 4 years Disable Zoom effect on Hover; over 4 years Any known issues using this


Image Zoom on Hover, Click, Mouseover, Touch to zoom Adaptive and responsive Fully respoinsive image zoomer with mobile gestures Impress your visitors with a smooth image magnify effect on hover. Tablet, phone, smartphone, desktop, laptop, Windows, Android, iOS (​Plus version) Added history setting that provides an ability to disable exit fullscreen  Download opera mobile emulator; Install the downloaded file, and run the emulator. Choose your device preferred devices from the list. Drag your file into that emulator to run the non_zoom-able file. Non-zoomable Example: Zoomable Example: Example: This example uses user-scalable=no to disable zoom on mobile web page.


Jquery Image Zoom Plugin, Include your Image. Elevate Zoom works best using two images, one low resolution for the visible image, and one high resolution for the zoomed image. If you only  elevatezoom is a jQuery Image zoom script, with lots of configurations including window, lens and inner zoom modes, also has the ability for tints and easing and distributed under the GPL and MIT licenses.


Open issues for elevatezoom, Open issues for elevatezoom. Issues filed for elevateweb/elevatezoom over 4 years Disable Zoom effect on Hover; over 4 years Any known issues using this Elevatezoom breaks "swipe" events on mobile devices - images won't "swipe"  Image zoom plugins also work well as simple hover effects where the hovered image wither zoom in or out for usability purpose. 1. jQuery Snipe. Snipe is a jQuery plugin that lets you add a sniper-lens-style zoom on images. Snipe makes zoom effect over images that follow the mouse. 2. Enhance.js