jquery - 如何将放大镜 jQuery 图像放大镜添加到放大的幻想框弹出图像？

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-index8010不允许loupe显示，只需将其设置得更高z-index:8020;以使其工作。

.loupe {
    z-index:8020;
}