How can I add the loupe jQuery image magnifier to enlarged fancybox popup image?

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;
}