javascript - fancyBox v2 : Custom button navigation

Question

我有几乎相同的问题:Fancybox 2: custom navigation

我需要一个自定义导航，就像 fancyBox 中带有自定义按钮的示例一样:http://jsfiddle.net/deseA/100/

就是这样，按钮位于图像上方。但是，当我将菜单附加到 fancybox-inner 时，当我单击下一张图片时，链接消失了。我尝试了上述帖子中的解决方案，但它不起作用。这是我的代码:

$(".fancybox").fancybox({
    nextEffect  : 'fade',
    prevEffect  : 'fade',
    padding     : 0,
    margin      : [15, 15, 40, 15],
    afterLoad   : addLinks,
    beforeClose : removeLinks
});

function addLinks() {
    var list = $("#links");

    if (!list.length) {    
        list = $('<ul id="links">');

        for (var i = 0; i < this.group.length; i++) {
            $('<li data-index="' + i + '"><label></label></li>')
                .click(function() { $.fancybox.jumpto($(this).data('index')); })
                .appendTo(list);
        }

        list.appendTo('.fancybox-inner');
    }

    list.find('li').removeClass('active').eq(this.index).addClass('active');
}

function removeLinks() {
    $("#links").remove();    
}

Answer 1

您可以尝试将 list.appendTo('.fancybox-inner'); 行从 if 语句中移出。因此，函数 addLinks() 看起来像这样:

function addLinks() {
    var list = $("#links");

    if (!list.length) {
        list = $('<ul id="links">');

        for (var i = 0; i < this.group.length; i++) {
            $('<li data-index="' + i + '"><label></label></li>')
                .click(function() { $.fancybox.jumpto($(this).data('index')); })
                .appendTo(list);
        }
    }

    list.appendTo('.fancybox-inner');
    list.find('li').removeClass('active').eq(this.index).addClass('active');
}