Question

我使用Jquery Fancybox和Isotope创建了一个库。我的页面上有缩略图列表。人们可以使用我使用Isotope创建的一些过滤器对图像进行排序。人们还可以使用JQuery Fancybox点击缩略图来放大它。我遇到的问题是，当有人对图像进行排序然后点击放大图像时，fancybox中的前进和后退按钮仍会循环显示所有图像，而不仅仅是过滤后的图像。例如：

如果这些是我的过滤器：

<li class="catOne">Category One</li>
<li class="catTwo">Category Two</li>

这些是我的照片：

<div class="isotopeItem catOne">Image goes here</div>
<div class="isotopeItem catOne">Image goes here</div>    
<div class="isotopeItem catTwo">Image goes here</div>    
<div class="isotopeItem catTwo">Image goes here</div>

当用户点击CatTwo过滤器时，该页面仅显示最后两张图像。但是，如果我点击图像看到它用Fancy box放大，我向前的向后按钮会带我浏览所有图像。我只希望它显示已过滤的图像。如果有意义，我可以在这里发布我的所有代码。试着保持简单。这是我正在谈论的页面的链接。 http://www.ce.ryanswansondesign.com/artists/artists/a-f/shelby-lee-adams.html

Answer 1

我应该多搜索一下。我在这里找到了这个很棒的解决方案：jQuery Isotope filtering with Fancybox

基本上解决方案与同位素过滤器有关。这是我添加到同位素的代码

   $('.filter a').click(function(){
          var selector = $(this).attr('data-filter-value');
      $('#artContent').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

我无法让这个工作。如何找出应该使用哪个选择器？ $('#artContent').isotope({ filter: selector }, 您正在使用#artContent，但由于我看不到您的HTML，因此我不知道应该替换它。

如何让同位素的过滤与jquery花式盒幻灯片放映一起使用？

2 个答案: