如何將放大鏡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-index為8010 ，不允許loupe顯示，只需給它更高的z-index:8020; 使它工作。

.loupe {
    z-index:8020;
}