ファンシーボックスでアイソトープフィルタリングに関する問題がある

Question

私は友人のための小さなポートフォリオサイトを作るために編集した無料反応性のあるウェブテンプレートを使って作業しています。私が抱えている問題は、特定のイメージギャラリーを選択してFancyboxウィンドウで表示すると、その特定のギャラリー内のイメージだけでなく、すべてのイメージをクリックし続けるということです。

私はこのソリューション（https://groups.google.com/forum/#!topic/fancybox/ncVsViD2v9o）を探していましたが、javascriptの知識はあまりないので、これが私にとってはうまくいくのか、それともテンプレートのコードに実装するのかは分かりません。

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 -->

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; 
 
    }); 
 
    } 
 
}

JS：私は、下記の関連のjsであると考えているのhtmlの部分と何を含めました

洞察力があれば幸いです。私はもう情報を提供する必要がある場合はお知らせください。

ありがとうございます！

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") 
}); 

私は右var $this = $(this);の上、ご$optionLinks.click関数内でのみこれらの行を追加しました。

これだけです。
CodePen hereを参照してください。