elevateZoom 禁用隐藏元素

Question

我正在使用 elevateZoom.js 预览图像。而且我对滑块中的隐藏元素有疑问。如何在悬停时禁用预览溢出隐藏的图片。在 thisexample 中，一切正常，但是如果您将鼠标悬停在滑块的右侧，您将看到隐藏图片的预览。是否可以禁用此功能？

代码是：

<!--Slider-->
<script type="text/javascript">
    $(document).ready(function() {
        $('#next').click(function(event) {
            event.preventDefault();
            $('#long-box').animate({scrollLeft:'+=706'}, 'slow');
        });
        $('#prev').click(function(event) {
            event.preventDefault();
            $('#long-box').animate({scrollLeft:'-=706'}, 'slow');
        });
    });
</script>

<!--Zoom-->
<script type="text/javascript">
    $(document).ready(function() {
        $('#sliding-windows').find("img").elevateZoom({
            zoomType: "lens",
            cursor: "crosshair",
            zoomWindowFadeIn: 500,
            zoomWindowFadeOut: 750
        });
    });
</script>

<div id="portfolio">
    <div id="long-box-wrapper">
        <div id="prev" class="button"></div>
        <div id="next" class="button"></div>
        <div id="long-box">
            <div id="sliding-windows">
                <img src="../irpex/img/portfolio_photos/small/1_small.jpg" data-zoom-image="../irpex/img/portfolio_photos/big/1_big.jpg">
                <img src="../irpex/img/portfolio_photos/small/2_small.jpg" data-zoom-image="../irpex/img/portfolio_photos/big/2_big.jpg">
                <img src="../irpex/img/portfolio_photos/small/3_small.jpg" data-zoom-image="../irpex/img/portfolio_photos/big/3_big.jpg">
            </div>
        </div>
    </div>
</div>

CSS 是：

#long-box {
    width: 702px;
    margin: 16px auto 50px auto;
    position: relative;
    overflow: hidden;
}

#long-box-wrapper {
    position: relative;
    width: 700px;
    margin: 0 auto;
}

#sliding-windows {
    width: 4232px;
    height: 933px;
    overflow: hidden;
}

Answer 1

https://github.com/elevateweb/elevatezoom/issues/14

描述了一种在悬停时加载 elevateZoom 的方法。代码 #3 确实提供了一种方法 调用缩放条件。如果添加正确的条件，这将解决问题。 不幸的是，截至 2014 年 5 月 2 日，elevateZoom 打破了 mouseenter/mouseleave 事件链 缩放时禁用 mousemove 事件处理。所以条件需要由外部设置 通过 elevateZoom 的 changeState 函数启用/禁用缩放。

代码 #1 有一个设置条件的解决方案 - 它处理所有鼠标移动并检查我们是否在 elevateZoom 的有效区域之外，然后在这种情况下完全禁用所有缩放。您现在可以使用代码 3 重新启用 zom。这是通过悬停功能完成的 - 您也可以使用 mouseMove 事件设置的 inGallery 标志。

以下是启发此答案的链接列表：

• elevateZoom disable hidden elements
• http://api.jquery.com/mouseout/
• https://github.com/elevateweb/elevatezoom/issues/14
• https://github.com/elevateweb/elevatezoom/issues/8
• Combining jquery functions - on() hover/mouseenter/mouseleave
• Bind a jquery image zoom effect to onclick

代码 #1

  var inGallery=false;
  $( "body" ).mousemove(function( event ) {
    var gallery=$("#carousel-gallery");
    var newInGallery = mouseWithin(gallery,event.pageX,event.pageY);
    // mousenter event trigger should deliver this functionality but doesn't in
    // conjuction with elevateZom
    if (newInGallery  && !inGallery) {
      // comment out if you don't want to visually show the difference
      gallery.css( "border", "3px solid red" );
      $(".thumbnail").each(function(index) {
       var elevateZoom=$(this).data('elevateZoom');
       if (typeof elevateZoom !== 'undefined') {
         elevateZoom.changeState('enable');
       }
      });
    }
    // mouseLeave event trigger should deliver this functionality but doesn't in 
    // conjunction with elevateZoom
    if (inGallery && !newInGallery) {
      // comment out if you don't want to visually show the difference
      $(".thumbnail").css( "border", "3px solid blue" );
      $(".thumbnail").each(function(index) {
       var elevateZoom=$(this).data('elevateZoom');
       if (typeof elevateZoom !== 'undefined') {
         elevateZoom.changeState('disable');
             // $(this).removeData('elevateZoom');//remove zoom instance from image
             // $('.zoomContainer').remove();// remove zoom container from DOM  
       }
      });
    }
    inGallery=newInGallery;
  });

代码 #2

这是检查鼠标是否在代码 #1 中使用的画廊范围内，另请参阅 how do I find out if the cursor is in the bounds of an element

function mouseWithin(bounds,x,y) {
    var offset = bounds.offset();
    var l = offset.left;
    var t = offset.top;
    var h = bounds.height();
    var w = bounds.width();

    var maxx = l + w;
    var maxy = t + h;

    return (y <= maxy && y >= t) && (x <= maxx && x >= l);
};

代码 #3

   $(".thumbnail").hover(function () { 
        var elevateZoom=$(this).data('elevateZoom');
        if (typeof elevateZoom === 'undefined') {
            $(this).elevateZoom({
              // http://www.elevateweb.co.uk/image-zoom/configuration
              // zoomType: "inner",
              // cursor: "crosshair"
              // gallery: 'carousel-gallery',
              // zoomEnabled: false, // start in disabled mode
              zoomWindowWidth: 600,
              zoomWindowHeight: 900,
              zoomWindowFadeIn: 500,
              zoomWindowFadeOut: 500,
              lensFadeIn: 500,
              lensFadeOut: 500,
              // tint:true, tintColour:'#404040', tintOpacity:0.5,
              scrollZoom : true
           });
           $(this).css( "border", "3px solid red" );
        } else {
           log('thumbnail.mousenter.zoomEnabled',elevateZoom.options.zoomEnabled);
           elevateZoom.changeState('enable');
        } // if
 });

Answer 2

试试这个：这对你来说可能很容易

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

Answer 3

在elevateZoom.js请查到代码

$('body').append(self.zoomContainer);

在它之前添加以下代码

$('.zoomContainer').remove();

滑块隐藏图片预览可以解决。 在 zoomType 上测试：inner。