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