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

Question

http://jsfiddle.net/warrenkc/svsdx/5440/ see my code so far.

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

I am looking to add an image magnifier such as loupe to the enlarged image popup from FancyBox. (Useful for users with lower screen resolutions when large images are shrunk by browser)

Does anyone know how to do this? Thanks!

Answer 1

Fiddle Demo

Use afterShow instead of 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
        }
    });
});

and use css

as you open fancybox popup it's z-index is 8010 which doesn't allow loupe to show up just give it higher z-index:8020; to make it work .

.loupe {
    z-index:8020;
}