在fancybox中存在同位素過濾問題

Question

我正在使用我編輯過的免費響應式網頁模板來爲朋友製作一個小型投資組合網站。我遇到的問題是，當我在Fancybox窗口中選擇特定的圖庫和視圖時，它將繼續點擊所有圖像，而不是單擊該特定圖庫中的圖像。

我一直在尋找並找到這個解決方案（https://groups.google.com/forum/#!topic/fancybox/ncVsViD2v9o），但我沒有真正掌握JavaScript知識，所以我不確定這是否適用於我或者如何將其應用到模板的代碼中。我已經包含和HTML的一部分我相信這是下面的相關JS：

HTML

<!-- Portfolio Projects --> 
 
<div class="row"> 
 
    <div class="span3"> 
 
    <!-- Filter --> 
 
    <nav id="options" class="work-nav"> 
 
     <ul id="filters" class="option-set" data-option-key="filter"> 
 
     <li class="type-work">Photography</li> 
 
     <li><a href="#filter" data-option-value="*" class="selected">All Images</a> 
 
     </li> 
 
     <li><a href="#filter" data-option-value=".people">People</a> 
 
     </li> 
 
     <li><a href="#filter" data-option-value=".places">Places</a> 
 
     </li> 
 
     <li><a href="#filter" data-option-value=".things">Things</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    <!-- End Filter --> 
 
    </div> 
 

 
    <div class="span9"> 
 
    <div class="row"> 
 
     <section id="projects"> 
 
     <ul id="thumbs"> 
 

 
      <!-- Item Project and Filter Name --> 
 
      <li class="item-thumbs span3 people"> 
 
      <!-- Fancybox - Gallery Enabled - Title - Full Image --> 
 
      <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="John" href="_include/img/work/full/people-01-full.jpg"> 
 
       <span class="overlay-img"></span> 
 
       <span class="overlay-img-thumb font-icon-plus"></span> 
 
      </a> 
 
      <!-- Thumb Image and Description --> 
 
      <img src="_include/img/work/thumbs/people-01.jpg" alt="Print Number 1–10"> 
 
      </li> 
 
      <!-- End Item Project --> 
 

 
      <!-- Item Project and Filter Name --> 
 
      <li class="item-thumbs span3 things"> 
 
      <!-- Fancybox - Gallery Enabled - Title - Full Image --> 
 
      <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Garden Wall" href="_include/img/work/full/things-07-full.jpg"> 
 
       <span class="overlay-img"></span> 
 
       <span class="overlay-img-thumb font-icon-plus"></span> 
 
      </a> 
 
      <!-- Thumb Image and Description --> 
 
      <img src="_include/img/work/thumbs/things-07.jpg" alt="Print Number 1–22"> 
 
      </li> 
 
      <!-- End Item Project -->

JS

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

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

 

 
    // 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 
 
     $container.isotope(options); 
 
     } 
 

 
     return false; 
 
    }); 
 
    } 
 
}

任何有識之士將不勝感激，請讓我知道如果我需要提供任何信息。

謝謝！

Answer 1

您的實時鏈接真的有幫助嘗試一些東西。順便說一下，好的演示文稿，
。

因此......就像我昨天在評論中所說的，解決您的問題的方法是更改​​data-fancybox-group屬性...並且您必須單擊類別鏈接來完成此操作。

所選類別中的圖片不得在FancyBox組「圖庫」中...但是在「選定」圖庫中。然後只顯示與被點擊觸發FancyBox的圖片名稱相同的圖片。

這裏是我添加的代碼：

// find the clicked category 
var fancyBoxClassToShow = $(this).attr("data-option-value"); 

// reset all data-fancybox-group (in case of a previous selection) 
$("#thumbs").find(".item-thumbs").each(function(){ 
    $(this).find("a").attr("data-fancybox-group","gallery") 
}); 

// change all data-fancybox-group that IS a child of the clicked category 
$("#thumbs").find(fancyBoxClassToShow).each(function(){ 
    $(this).find("a").attr("data-fancybox-group","gallerySelected") 
}); 

我只添加這行你$optionLinks.click功能，正上方var $this = $(this);。

就是這樣。
見CodePen here。