在 elevateZoom 中禁用移動設備懸停的縮放效果

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 最小版本（我的版本：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

我從這里找到並且最簡單的最佳答案： https ://github.com/elevateweb/elevatezoom/issues/102#issuecomment-255942134

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

Answer 5

在 js 插件中添加此選項

touchEnabled: false,

使用此選項，桌面 PC 圖像將被縮放，而在移動設備中，縮放將被禁用。

Answer 6

或者您可以使用媒體查詢隱藏.zoomContainer ？

例如：

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

Answer 7

我遇到了同樣的問題，所以我編輯了我的 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 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

對於那些仍然來自搜索引擎的人來說，管理不同大小的每個選項（如在移動設備上啟用/禁用）的最佳方法是使用插件的文檔！ 開始了：

首先，您必須管理 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 像素的設備上禁用。 當然，您可以為每個斷點添加更多范圍並管理插件選項。

Answer 10

從元素中取消綁定 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
}