0

我正在为 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/

4

1 回答 1

1

看看这个小提琴

有几件事不对劲。首先是这条线

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

您实际上是在最初将元素从其在 dom 中的位置移动并将其附加到.fancybox-wrap. 这样做的问题是，一旦加载下一个图像，它就会在内部加载，.fancybox-wrap并且当您的代码再次执行该行时，#detailviewernavDOM 中不再存在 a 。

所以你可以把它换成

$("#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();
    });
于 2012-09-26T20:09:30.390 回答