Question

当您检查移动设备上的elevateZoom时，虽然我们关闭了缩放选项，但点击图片时页面滚动选项仍无效。这是一个麻烦。

我们要为移动设备或响应大小禁用缩放选项。

我们可以使用任何值或变量来仅为移动设备完全禁用缩放效果吗？

有人可以建议如何做到这一点，或者有人在过去为他们的主题做过吗？

Answer 1

您可以获得ElevateZoom API：

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

为了启用/禁用缩放，您应该使用“changeState”方法

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

要检测更改媒体查询断点，您可以使用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

尝试

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

其他选项

$('#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

尝试禁用/评论触摸 jquery.elevatezoom.js 或 jquery.elevateZoom版本min中的事件（my版本：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

或者您可以使用媒体查询隐藏 .zoomContainer ？

例如：

allure.severity(allure.SEVERITY.BLOCKER);

Answer 5

我在这里找到了最简单的答案：https://github.com/elevateweb/elevatezoom/issues/102#issuecomment-255942134

@media（max-width：$ tablet-max）{/ *可以放大的图片* / .product__img {指针事件：无； }

Answer 6

我遇到了同样的问题，所以我编辑了我的js文件，并在其上添加了if，else条件。这种情况将类似于CSS媒体查询。

//JQUERY CODE

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

Answer 7

在js插件中添加此选项

touchEnabled: false,

在桌面PC上使用此选项将缩放图像，在移动设备上将禁用缩放。

Answer 8

如果您尝试了所有方法，但对您没有任何帮助，请尝试使用CSS保护套（对我来说很完美）

在您的HTML中：

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

在您的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;
    }
}

成功并获得良好的代码！

Answer 9

对于那些仍然来自搜索引擎的人，管理大小不同的每个选项（如在移动设备上启用/禁用）的最佳方法是使用插件的documentation！我们开始：

首先，您必须管理elevatezoom的全局选项：

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

然后添加以下代码：

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

因此，整个代码将是：

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

在这种情况下，将在宽度为320px至991px的设备上禁用elevatezoom。当然，您可以为每个断点添加更多范围并管理插件选项。

在elevateZoom中禁用Hover for Mobile设备的缩放效果

9 个答案: