0

我有一个带有图片库的页面，我正在使用带有过滤功能的 jquery wookmark 插件。然后我还想使用插件颜色框（wich wookmark 已经在他们的插件中提供了一个示例），并且我能够加入颜色框和过滤器系统。我脑海中的问题是，当我使用过滤器时，不是要显示 50 张照片，而是只有 5 张可见，我如何对 colorbox 说只显示那 5 张？

所以我像这样初始化颜色框：

    $('li a').colorbox({
         rel: 'lightbox', scalePhotos: true, maxWidth: '80%', maxHeight: '80%'
    });

然后在过滤器的点击事件中，我认为最好的方法是，每当有点击时，从所有图像中删除颜色框，并仅为具有活动类的 li 内的项目再次初始化颜色框，如下所示：

    var onClickFilter = function(event) {

      var item = $(event.currentTarget), activeFilters = [];
      item.toggleClass('active');

      // Collect active filter strings
      filters.filter('.active').each(function() {
        activeFilters.push($(this).data('filter'));
      });

      handler.wookmarkInstance.filter(activeFilters, 'or');       

  //here i remove colorbox from every item
      $.colorbox.remove();        

      //here i instantiate colorbox for active item 
  $('#tiles li.active a').colorbox({
        rel: 'lightbox', scalePhotos: true, maxWidth: '80%', maxHeight: '80%'
      });
    }

这有点工作！例如，我加载了 100 张图片的页面，colorbox 库显示了 100 张要显示的图片；我单击一个过滤器，我看到 10 个图像，colorbox 提供 10 个图像显示，我单击另一个过滤器以添加更多图像，我看到 24 个图像，colorbox 将它的画廊刷新为 24。问题是，如果我再次单击相同的最后一个过滤器将其停用，colorbox 不再只看到 10 个图像，而是 24 个。

4

1 回答 1

0

好吧，实际上我发布的内容是正确的。如果有人想使用它，我很乐意提供帮助。但我发现我的问题不是我描述的问题。

Wookmark 插件，仅添加和删除不活动的类。所以在 wookmark 的 js 中，当项目处于非活动状态时，我没有删除活动类。他们我们两个班级都住在一起，而且由于 active 没有属性，所以我没有看到。感谢您的帮助（头脑风暴）...

于 2013-09-28T21:45:34.547 回答