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禁用隱藏元素

回答

相關問題