Как я могу добавить увеличитель изображения 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 popup, это z-index 8010 что не позволяет loupe показать просто дать ему выше z-index:8020; чтобы это работало.

.loupe {
    z-index:8020;
}