elevateZoom禁用隐藏元素

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

的代码是：

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

来源

2014-01-20 kxc

我想计数的元素，并且只适用于第8个元素悬停动作，滑块点击后接下来，应用悬停对于从8到8 + 8 = 16的元素。但我希望这不是最好的解决方案。 – kxc

-1

在elevateZoom.js请找代码

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

之前添加以下代码

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

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

来源

2014-04-09 11:29:32

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

介绍了一种方式来加载elevateZoom悬停。代码＃3确实提供了一种方式来调用条件上的缩放。如果添加了正确的条件，这将解决问题。不幸的是，截至2014年5月2日，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

这是检查鼠标是否是画廊中编号＃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 
});

来源

2014-05-01 18:48:01

尝试下面这样：它可能容易让你

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

来源

2015-08-14 06:53:08

elevateZoom禁用隐藏元素

回答

相关问题