在 fancybox 中进行同位素过滤时遇到问题

Question

我正在使用一个免费的响应式 Web 模板，我已经编辑它来为朋友制作一个小型投资组合网站。我遇到的问题是，当我选择一个特定的图片库并在 Fancybox window 中查看时，它会继续点击所有图片，而不仅仅是那个特定图片库中的图片。

我一直在搜索并找到了这个解决方案 (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

您的直播 link 真的很有帮助，值得尝试。
顺便说一句，介绍不错。

所以...正如我昨天在评论中所说，您的问题的解决方案是更改 data-fancybox-group 属性...而且您必须在单击类别时执行此操作 link.

所选类别中的图片不能在 FancyBox 组中 "gallery"... 但在 "selected" 图库中。只会显示与点击触发 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。

在 fancybox 中进行同位素过滤时遇到问题

Having Issues with isotope filtering in fancybox

javascript

jquery

fancybox-2

jquery-isotope