2013-10-23 160 views
1

我几乎同样的问题如下:Fancybox 2: custom navigation的fancybox V2:自定义按钮导航

我需要一个自定义导航,就像从的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();  
} 

回答

0

你可以试着招行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'); 
}