如何将放大镜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; 
}