用Fancybox進行jQuery同位素篩選

我用Imagegallery製作了一個網站，他可以用jQuery Isotope進行篩選。您可以在縮略圖上點擊，然後循環槽與插件的fancybox的圖像：用Fancybox進行jQuery同位素篩選

現在的事情是，當beeing過濾Imagegallery，插件的fancybox仍然週期低谷的所有圖像。即使是應用過濾器時也沒有出現的人。

我不知道如何解決這個問題。

Fancybox determens與rel="gallery"的畫廊。同位素決定了通過CSS類的過濾效果。因此，如果我將過濾css類添加到rel=""標記（同位素過濾類由cms生成），則當顯示所有內容時，我不再能夠循環顯示所有圖像。

我真的無法得到我的頭。你有什麼想法如何做到這一點？

來源

2013-01-19 KSPR

這將有助於有一些代碼。不過，我可以告訴你如何使用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-19 15:55:04 ellenmva

是的，我回答了這個問題** [HERE]（https://groups.google.com/forum/#!topic/fancybox/ncVsViD2v9o）**，只要確保至少使用同位素v1。 5+ – JFK

這非常簡潔。非常感謝你：） – KSPR

我試着按照ellenmva的解釋方式來做，但無法讓它正常工作。我最終刪除了$('#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-04 10:41:16 Hansted

用Fancybox進行jQuery同位素篩選

回答

相關問題