Question

我正在为Fancybox 2制作我自己的自定义导航。一切正常，直到我碰到以下问题。我的fancybox打开的那一刻，箭头是可见的并且正常工作，但当我点击它们时，它们会从下一个图像显示的那一刻起消失。

$("#portfoliodetail a.detailviewer").fancybox({
    padding: 0,
    helpers:{
        overlay: {
            css: {
                'background': 'rgba(0,0,0,0.84)'
            }
        }
    },
    afterShow: function() {
        $("#detailviewernav").appendTo(".fancybox-wrap");
        $("#detailviewernav").show();
    },
    afterClose: function() {
        $("#detailviewernav").hide();
    }
});

$('#detailviewerprev').click(function(){
  $.fancybox.prev();
});

$('#detailviewernext').click(function(){
  $.fancybox.next();
});

function mycarousel_initCallback(carousel) {
   $('#mycarousel-next').bind('click', function() {
       carousel.next();
       return false;
   });

   $('#mycarousel-prev').bind('click', function() {
       carousel.prev();
       return false;
   });
};

正如您所看到的，'detailviewernav'div是我自定义的导航，我展示了＆amp;在图库被打开时隐藏。我将它附加到fancybox_wrap类。

知道我该如何解决这个问题？

干杯！

编辑：我添加了一个JSFiddle！ http://jsfiddle.net/J2eHp/1/

Answer 1

查看此fiddle

有几件事是错的。首先是这一行

$("#detailviewernav").appendTo(".fancybox-wrap");

您实际上最初将元素从其在dom中的位置移动并将其附加到.fancybox-wrap。问题是，一旦下一个图片加载，它就会加载到.fancybox-wrap内，当你的代码再次执行该行时，DOM中就不再有#detailviewernav。

所以你可以用

交换它

$("#detailviewernav").clone().appendTo(".fancybox-wrap");

在移动之前克隆它，以便您再次访问它。（您可能希望使用类而不是ID，这样您就不会得到具有相同ID的多个元素。

第二件事是因为DOM被操纵，你需要委托事件。

$('body').on('click','.fancybox-wrap #detailviewerprev',function(){
        $.fancybox.prev();
    });

    $('body').on('click','.fancybox-wrap #detailviewernext',function(){
      $.fancybox.next();
    });

Fancybox 2：自定义导航

1 个答案:

查看此fiddle