使用同位素fancybox

Question

對不起，我的英文（我是法國人），我希望在我的解釋中清楚： 我想使用Fancybox2與同位素，經過多次研究，我仍然不能讓他們一起工作。

當我過濾選擇，的fancybox不考慮到這一點，並顯示我的所有類別。

這裏是我的代碼：

/* ================================================== 
    Filter Works 
================================================== */ 

BRUSHED.filter = function(){ 


     // filter items when filter link is clicked 
     var $optionSets = $('#options .option-set'), 
      $optionLinks = $optionSets.find('a'); 

      $optionLinks.click(function(){ 

      var $this = $(this); 
      // don't proceed if already selected 
      if ($this.hasClass('selected')) { 
       return false; 
      } 
      var $optionSet = $this.parents('.option-set'); 
      $optionSet.find('.selected').removeClass('selected'); 
      $this.addClass('selected'); 

      // make option object dynamically, i.e. { filter: '.my-filter-class' } 
      var options = {}, 
       key = $optionSet.attr('data-option-key'), 
       value = $this.attr('data-option-value'); 
      // parse 'false' as false boolean 
      value = value === 'false' ? false : value; 
      options[ key ] = value; 
      if (key === 'layoutMode' && typeof changeLayoutMode === 'function') { 
       // changes in layout modes need extra logic 
       changeLayoutMode($this, options) 
      } else { 
       // otherwise, apply new options 
       $containermasonry.isotope(options); 
      } 

      return false; 
     }); 

} 



/* ================================================== 
    FancyBox 
================================================== */ 

BRUSHED.fancyBox = function(){ 

     $(".fancybox").fancybox() 

// Make Fancybox Respect Isotope Filtering   HERE IS THE PROBLEME !? 

$('#filters a').on("click", function(){ 
    var selector = $(this).attr('data-option-value'); 

    $('.masonry').isotope({ filter: selector }, function(){ 
    if(selector == "*"){ 
    $(".fancybox").attr("data-fancybox-group", "gallery"); 
    } else{ 
    $(selector).find(".fancybox").attr("data-fancybox-group", selector); 
    } 
    }); 
    return false; 
}); 

} 

<!-- Filter --> 
        <nav id="options" class="work-nav type-workmarge"> <!-- flotant +marge --> 
         <ul id="filters" class="option-set" data-option-key="filter"> 
          <li class="type-work">Sélection</li> 
          <li><a href="#filter" data-option-value="*" class="selected">All Projects</a></li> 
          <li><a href="#filter" data-option-value=".design">Design</a></li> 
          <li><a href="#filter" data-option-value=".photography">Photography</a></li> 
          <li><a href="#filter" data-option-value=".video">Video</a></li> 
         </ul> 
        </nav> 
        <!-- End Filter --> 

    <div id="worksss" class="masonry js-masonry" data-masonry-options='{ "isFitWidth": true }'> 

    <!-- the list of my images --> 
     <div class="item item-thumbs design"><a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The City" href="_include/img/work/image-01.jpg"> 
             <span class="overlay-img"></span> 
             <span class="overlay-img-thumb font-icon-plus"></span> 

            </a><img src="_include/img/work/thumbs/image-01.jpg" alt="Description"> 
     </div> 
     <div class="item item-thumbs photography"><a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The City" href="_include/img/work/image-02.jpg"> 
             <span class="overlay-img"></span> 
             <span class="overlay-img-thumb font-icon-plus"></span> 

            </a><img src="_include/img/work/thumbs/image-02.jpg" alt="Description"> 
    <!-- etc--> 
    </div> 

如果您有任何意見或解決方案，非常感謝你提前！

Answer 1

感謝您的鏈接，我沒有發現任何有用的，但是，我注意到通過刪除以下行，它的工作原理！

$('.masonry').isotope({ filter: selector }, function(){ 

總結：

 $(".fancybox").fancybox() 

// Isotope Filtering 
$('#filters a').on("click", function(){ 
    var selector = $(this).attr('data-option-value'); 

    $('.masonry').isotope({ filter: selector }, function(){ 
    if(selector == "*"){ 
    $(".fancybox").attr("data-fancybox-group", "gallery"); 
    } else{ 
    $(selector).find(".fancybox").attr("data-fancybox-group", selector); 
    } 
    return false; 
}); 

Answer 2

插入任一filter: '.design'或filter: '.video' - 你的選擇！

BRUSHED.filter = function() { 
    if ($('#projects').length > 0) { 
     var $container = $('#projects'); 

     $container.imagesLoaded(function() { 
      $container.isotope({ 
       // options 
       filter: '.design', 
       animationEngine: 'best-available', 
       itemSelector: '.item-thumbs', 
       layoutMode: 'fitRows' 
      }); 
     }); 
    } 
};