Question

尝试让我的画廊正常运作。现在我使用isotope.js过滤我的画廊，将photoswipe.js作为灯箱。

我的问题是即使它正在过滤画廊，照片仍会显示所有图像。

我发现了这个：

// Use the shinybox only for  visible elements
var shinyboxInstance = $(".shinybox-isotope:not(.isotope-hidden .shinybox-isotope)").shinybox();

// Callback function that fire the refresh method, once the animation is finished
onAnimationCompleted = function(){
    shinyboxInstance.refresh();
};

我拥有它，所以当一个项被隐藏时，类.isotope-hidden被添加到元素中，所以我就在那里。我只需要适当的脚本来强制photoswipe只显示过滤后的图像。

Photoswipe

Isotope

任何帮助将不胜感激。谢谢！

Answer 1

对我来说，问题是我的灯箱使用数组来决定要显示的图像。此数组是在页面加载时创建的，而不是在单击过滤器时进行编辑。

因此解决方案是在用户点击图像但在加载灯箱之前创建一个新数组。

找到决定灯箱数组中对象的代码部分。对我来说是：

var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);

这就是采取变量＆＃34; items＆＃34;作为每个数组对象显示在灯箱中。所以就在本节之前，我编写了自定义代码来创建一个在打开灯箱时使用的新数组。下面是为我解决这个问题的整个代码chuck：

getFigures = function() {
                var filteredFigures = [];
                $pic.find('figure:visible > a').each(function() {
                    var $href   = $(this).attr('href'),
                        $size   = $(this).data('size').toString().split('x'),
                        $width  = $size[0],
                        $height = $size[1];

                var figures = {
                    src : $href,
                    w   : $width,
                    h   : $height
                };
                filteredFigures.push(figures);
            });
            return filteredFigures;
        };

然后在变量灯箱中我将项目更改为filteredFigures，因为我选择描述我的新数组。

这让我困扰了很长一段时间希望这可以帮到你！

Answer 2

我找到了一个简单的解决方案。

单击滤镜时，我从图像中删除了photowipe类，并且仅为具有滤镜类的图像添加了该类。

希望这对某人有帮助。

--doctest-modules

PhotoSwipe与同位素（画廊）

2 个答案: