Fancybox 2：自定义导航

Question

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

$("#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 是我的自定义导航，我在打开画廊时显示和隐藏。我将它附加到 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();
    });