PhotosWipe открывает неправильное изображение после применения фильтра - PullRequest
Новая
       10

PhotosWipe открывает неправильное изображение после применения фильтра

0 голосов
/ 05 мая 2018

После того, как я применил фильтр (настройка отображения некоторых изображений в зависимости от имен классов). 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;
        };

Это мой код, который выбирает индекс и открывает 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();

Заранее спасибо за любую помощь!

1 Ответ

0 голосов
/ 14 мая 2018

Одно из решений состоит в том, чтобы не открывать изображение, используя его порядковый номер, потому что именно здесь происходит несоответствие. Используйте что-то еще: у объекта есть ключ "src", значение которого соответствует href изображения, на которое вы щелкаете. Так что используйте это, чтобы открыть картинки

код для открытия фотографии с прочтением следующим образом работает: 

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