javascript - fancyBox v2：自定义按钮导航

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语句中移出。所以，function 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');
}