jquery - elevateZoom禁用隐藏的元素

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

代码是：

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

最佳答案

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中使用的Gallery的范围之内。
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
 });

关于jquery - elevateZoom禁用隐藏的元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21234070/