PhotoSwipe with Isotope（画廊）答案

【问题标题】：PhotoSwipe with Isotope (galleries)PhotoSwipe with Isotope（画廊）
【发布时间】：2015-03-19 05:48:20
【问题描述】：

试图让我的画廊正常运行。现在我正在使用 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

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

【问题讨论】：

您找到解决方案了吗？我没有使用同位素，而是使用 shuffle.js，但我认为您的解决方案也可以满足我的需要。谢谢。

标签： javascript jquery gallery photoswipe

【解决方案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;
        };

然后在变量灯箱中，我将项目更改为过滤图形，因为这就是我选择描述我的新数组的方式。

这件事困扰了我很长时间，希望能有所帮助！

【讨论】：

【解决方案2】：

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

当点击过滤器时，我从图像中删除了 photoswipe 类，我只为具有过滤器类的图像添加类。

希望这对某人有所帮助。

    $('.gallery-filters .filter-item').on('click', function () {
        var activeGallery = ($(this).data('filter')); //get the current filter 
        $(".photoswipe-gallery .gallery-item a").each(function () {
            $(this).removeClass('photoswipe'); //remove all photoswipe classes
        });
        $(".photoswipe-gallery .gallery-item" + activeGallery +" a").each(function () {
            $(this).addClass('photoswipe');  //add photoswipe class only for active images
        });
    });

【讨论】：