elevateZoom禁用隐藏的元素
我正在使用elevateZoom.js作为预览图像。 我在滑块中隐藏了元素的问题。 如何在hover时禁用预览溢出隐藏的图片。 在此示例中 ，一切正常，但如果您将鼠标hover在滑块的右侧，您将看到隐藏图片的预览。 是否可以禁用此function？
代码是：
$(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'); }); }); $(document).ready(function() { $('#sliding-windows').find("img").elevateZoom({ zoomType: "lens", cursor: "crosshair", zoomWindowFadeIn: 500, zoomWindowFadeOut: 750 }); }); 
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
描述了一种在hover时加载elevateZoom的方法。 代码＃3确实提供了一种在条件上调用缩放的方法。 如果添加了正确的条件，这将解决问题。 不幸的是，自2014-05-02起，elevateZoom通过在缩放时禁用mousemove事件处理来中断mouseenter / mouseleave事件链。 因此，需要通过elevateZoom的changeState函数启用/禁用缩放来外部设置条件。
代码＃1有一个设置条件的解决方案 – 它处理所有鼠标移动并检查我们是否在elevateZoom的有效区域之外，然后在这种情况下完全禁用所有缩放。 您现在可以使用代码3重新启用zom。 这是通过hoverfunction完成的 – 您还可以使用mouseMove事件设置的inGallery标志。
这是一个鼓舞这个答案的链接列表：
- 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
代码＃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的范围内。另请参阅如何确定光标是否在元素的边界内
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 });
试试这个：它可能很容易
$('#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; } });
在elevateZoom.js请找到代码
$('body').append(self.zoomContainer);
在它之前添加以下代码
$('.zoomContainer').remove();
滑块隐藏图片预览可以解决。 测试zoomType： inner 。