Question

我正在使用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;
}

Answer 1

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

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

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

这是一个鼓舞这个答案的链接列表：

代码＃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

这是检查鼠标是否在Code＃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
 });

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。

elevateZoom禁用隐藏的元素

3 个答案: