elevateZoom禁用隐藏的元素 [英] elevateZoom disable hidden elements
问题描述
我正在使用elevateZoom.js作为预览图片。我在滑块中隐藏了元素的问题。如何在悬停时禁用预览溢出隐藏的图片。在这个示例中，一切正常，但是如果你将鼠标悬停在滑块的右侧，你会看到预览隐藏的图片。是否可以禁用此功能？
I'm using elevateZoom.js for preview image. And I have a problem with hidden elements in slider. How to disable preview overflow-hidden pictures on hover. In thisexample, all works fine, but if you hover mouse at right side from slider, you will see preview of hidden pictures. Is it possible to disable this?
代码为：
<!--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-05-02起，elevateZoom会以
的形式打破mouseenter / mouseleave事件链，在缩放时禁用mousemove事件处理。因此需要通过
从外部设置条件，通过elevateZoom的changeState函数启用/禁用缩放。
describes a way to load elevateZoom on hover. The code #3 does provide a way to call the zoom on a condition. This would solve the problem if the right condition is added. Unfortunately as of 2014-05-02 elevateZoom breaks the mouseenter/mouseleave event chain by disabling the mousemove event handling while zooming. So the condition needs to be set externally by enableing/disabling the zoom via the changeState function of elevateZoom.
代码＃1有一个设置条件的解决方案 - 它处理所有鼠标移动并检查我们是否在elevateZoom的有效区域之外，然后完全禁用所有缩放是这样的。您现在可以使用代码3重新启用zom。这是通过悬停功能完成的 - 你也可以使用mouseMove事件设置的inGallery标志。
Code #1 has a solution for setting the condition - it handles all mouse moves and checks whether we are outside the valid area for elevateZoom and then disables all zooms altogether while this is the case. You can now use code 3 to reenabling the zom. Here this is done with a hover function - you could also use the inGallery flag set by the mouseMove event.
这是一个鼓舞这个答案的链接列表：
Here is a list of links inspiring this answer:
- elevateZoom禁用隐藏元素
- http：//api.jquery .com / mouseout /
- https： //github.com/elevateweb/elevatezoom/issues/14
- https://github.com/elevateweb/elevatezoom/issues/8
- 组合jquery函数 - on（）hover / mouseenter / mouseleave
- 将jquery图像缩放效果绑定到onclick
- 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
这是检查鼠标是否在Code＃1中使用的Gallery的范围内。另请参阅
如何判断光标是否在元素的边界内
this is the check whether the mouse is within the bounds of the Gallery used in Code #1 see also 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
});
这篇关于elevateZoom禁用隐藏的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
