如何将百叶窗jQuery图像放大镜添加到放大的fancybox弹出图像中？

Question

到目前为止，http://jsfiddle.net/warrenkc/svsdx/5440/看到了我的代码。

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

我希望添加一个图像放大镜，如百叶窗放大的图像弹出从FancyBox。(当大图像被浏览器缩小时，屏幕分辨率较低的用户非常有用)

有人知道怎么做吗？谢谢!

Answer 1

小提琴演示

使用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索引是8010，它不允许loupe出现，只需给它更高的z-index:8020;以使其工作。

.loupe {
    z-index:8020;
}