如何將放大鏡jQuery圖像放大鏡添加到放大的fancybox彈出圖像中？

Question

http://jsfiddle.net/warrenkc/svsdx/5440/到目前爲止看到我的代碼。

$(document).ready(function() { 
    $("#single").fancybox(); 
    $("#demo-2").loupe(); 
}); 

我期待添加一個圖像放大鏡，如放大鏡，從FancyBox放大的圖像彈出。 （適用於屏幕分辨率較低時瀏覽器縮小大圖像的用戶）

有誰知道如何做到這一點？謝謝！

Answer 1

Fiddle Demo

使用afterShow而不是afterLoad

$(document).ready(function() { 
    $("#single_1").fancybox({ 
     helpers: { 
      title: { 
       type: 'float' 
      } 
     }, 
     afterShow: function() { //change here 
      $('.fancybox-image').loupe(); //apply loupe after popup has been shown 
     } 
    }); 
}); 

，並使用CSS

爲你開放的fancybox彈出它的z-index是8010不允許loupe露面只是讓它更高z-index:8020;，使其工作。

.loupe { 
    z-index:8020; 
}