1

jQuery Isotope でフィルタリングできる Imagegallery で Web サイトを作成しました。サムネイルをクリックしてから、fancybox プラグインを使用して画像を切り替えることができます。

Webサイト

問題は、Imagegallery がフィルター処理されている場合でも、fancybox プラグインはすべての画像を循環します。フィルターをかけたときに見えない人も。

どうすればこれを解決できるかわかりません。

Fancybox は でギャラリーを決定しrel="gallery"ます。Isotope は、css クラスを通じてフィルタリング効果を決定します。そのため、フィルタリング css クラスをrel=""タグに追加すると (アイソトープ フィルタリング クラスは cms によって生成されます)、すべてが表示されたときに、すべての画像を循環できなくなります。

私は本当にこれについて頭を悩ませることができません。これを行う方法はありますか？

4

2 に答える 2

4

いくつかのコードがあると役立ちます。ただし、フィルター処理された画像を操作するための fancybox を取得した方法をお見せできます。

rel=gallery ではなく、data-fancybox-group=gallery を使用しています。.fancybox は、同位体のフィルター文字列を使用して fancybox を呼び出しているクラスです。

// filter buttons
        $('#filters a').click(function(){
              var selector = $(this).attr('data-filter');
          $('#isotopegallery').isotope({ filter: selector }, function(){
            if(selector == "*"){
             $(".fancybox").attr("data-fancybox-group", "gallery");
            } else{ 
             $(selector).find(".fancybox").attr("data-fancybox-group", selector);
            }
          });
          return false;
        });

それはすべてフィルターボタンにあります。動作しない場合は、コードを共有してください。

于 2013-01-19T15:55:04.567 に答える
0

ellnmva が説明した方法で実行しようとしましたが、うまくいきませんでした。やっとパーツを外せました$('#isotopegallery').isotope({ filter: selector }, function()。だから私が残したのは：

$('.filterbutton').on("click", function(){
    var selector = $(this).attr('data-option-value');
    if(selector == "*"){
        $(".fancybox").attr("data-fancybox-group", "gallery");
    } else{ 
        $(selector).find(".fancybox").attr("data-fancybox-group", selector);
    }
   return false;
});

それはうまくいくように見えましたが、今ではうまく機能しています。

于 2015-09-04T10:41:16.107 に答える