繁体   English   中英

在 elevateZoom 中禁用移动设备悬停的缩放效果

[英]Disable Zoom effect on Hover for Mobile devices in elevateZoom

当您在移动设备上检查elevateZoom时,尽管我们关闭了缩放选项,但当我们单击图像时页面滚动选项不起作用。 这是一个麻烦。

我们想禁用移动设备响应式尺寸的缩放选项。

是否有任何值或变量可以用于仅完全禁用移动设备的缩放效果?

任何人都可以建议如何做到这一点,或者是否有人过去为他们的主题做过?

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

尝试

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

尝试在jquery.elevatezoom.jsjquery.elevateZoom 最小版本(我的版本: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); 
                }); */

我从这里找到并且最简单的最佳答案: https ://github.com/elevateweb/elevatezoom/issues/102#issuecomment-255942134

@media(max-width: $tablet-max) { /* 放大的图片 */ .product__img { pointer-events: none; } }

在 js 插件中添加此选项

touchEnabled: false,

使用此选项,桌面 PC 图像将被缩放,而在移动设备中,缩放将被禁用。

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

例如:

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

我遇到了同样的问题,所以我编辑了我的 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
        }
}

如果您尝试了所有方法但没有任何效果,请尝试使用 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;
    }
}

所有人的成功和良好的代码!

对于那些仍然来自搜索引擎的人来说,管理不同大小的每个选项(如在移动设备上启用/禁用)的最佳方法是使用插件的文档 开始了:

首先,您必须管理 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
            }
        ]
});

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

从元素中取消绑定 touchmove

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

然后隐藏缩放区域的容器

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

使用此代码检测手机

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM