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

fancyBox v2：自定义按钮导航

1 个答案: