javascript - PhotoSwipe 同位素(画廊)

Question

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

我的问题是，即使它正确地过滤了图库，photoswipe 仍然显示所有图像。

我发现了这个:

// 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);

这表示将变量“items”作为要在灯箱中显示的每个数组对象。因此，就在本节之前，我编写了自定义代码来创建一个新数组，该数组将在打开灯箱时使用。下面是为我解决这个问题的整个代码:

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，因为这就是我选择描述我的新数组的方式。

这个问题困扰我很久了，希望能帮到你!