photoswipe opening wrong image after filter is applied

Question

After I apply a filter (setting some images to display none depending on class names). Photoswipe is opening according to the index number each image originally had. The array that photoswipe is pulling from is updated to only include filtered images. However, the index value that each image points to does not update.

If an image was item 5 in un-filtered gallery and number 1 in the filtered gallery, after applying filter, clicking on this image will open image number 5 in the filtered gallery.

This is my code that sets the array:

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;
        };

This is my code that is selecting index and opening photoswipe:

    $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();

Thanks in advance for any help!

score 1 · Answer 1 · answered May 14 '18 at 14:59

One solution is to not open the picture using its index number because that is where the mismatch is happening. Use something else: The object has a key "src" who's value matches the href of the image you are clicking on. So use that to open the pictures

code to open photoswipe reading as follows works:

        $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 opening wrong image after filter is applied

1 Answers1