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、コードがその行を再度実行すると#detailviewernav、DOMにが存在しなくなることです。

だからあなたはそれをと交換することができます

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

移動する前にクローンを作成して、再度アクセスできるようにします。（同じIDを持つ複数の要素になってしまわないように、IDの代わりにクラスを使用することをお勧めします。

2つ目は、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 に答える