Question

应用过滤器后（根据类名设置一些图像不显示）。 Photoswipe根据每个图像最初具有的索引号打开。 photoswipe正在拉出的数组更新为仅包含已过滤的图像。但是，每个图像指向的索引值不会更新。

如果图片是未经过滤的图库中的第5项和已过滤图库中的第1项，则在应用过滤器后，点击此图片将在过滤的图库中打开图片编号5.

这是我设置数组的代码：

getFigures = function() {
var filteredFigures = [];
$pic.find('figure:visible > a').map(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;
        };

这是我选择索引和打开照片的代码：

    $pic.on('click', 'figure', function(event) {
    event.preventDefault();

         filteredFigures = getFigures();
            $.map(filteredFigures, function(index, value) {
            image[index]     = new Image();
            image[index].src = value['src'];
        });
            var $index = $(this).index();
            var options = {
                index: $index,
                bgOpacity: 0.8,
                showHideOpacity: true
            }

            var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, filteredFigures, options);
            lightBox.init();

提前感谢您的帮助！

Answer 1

一种解决方案是不使用其索引号打开图片，因为这是发生不匹配的地方。使用别的东西：对象有一个键＆＃34; src＆＃34;谁的值与您点击的图像的href相匹配。所以用它打开图片

打开photoswipe阅读的代码如下：

        $pic.on('click', 'a', function(event) {
        event.preventDefault();
        filteredFigures = getFigures();

    var clickedAHref = ($(this).attr('href'));
    console.log(clickedAHref);
    var matchedIndex = filteredFigures.map(function (obj) { return obj.src; }).indexOf(clickedAHref);


        var $index = $(this).index();
        var options = {
            index: matchedIndex,
            bgOpacity: 0.8,
            showHideOpacity: true
        }

        var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, filteredFigures, options);
        lightBox.init();
    });

应用过滤器后，photoswipe会打开错误的图像

1 个答案: