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を使用する

ファンシーボックスポップアップを開くと、z-indexが表示され8010ず、動作させるloupeために高くz-index:8020;するだけです。

.loupe {
    z-index:8020;
}