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