Как исключить повторы?

Question

[Алексей Клёнин]

Добрый день.
Помогите пожалуйста решить проблему.
По скольку сам не силен в jquery опишу как есть.

Есть сайт в качестве модального окна для фотографий используется Photoswipe.
Это всё было подключено программистом и работает более-менее корректно, кроме одного нюанса.
При открытии в модальном окне, отображается общее кол-во фото на странице, к примеру пусть их будет 33, так вот проблема заключается в том что при первом открытии кол-во фото отображается корректно, а при втором и последующем к ним начинает добавляться ровно их кол-во на странице, т.е. второй раз если открыть будет 66, третий 99 и т.д.

Код, с помощью которого подключена данная галерея следующий

$(function() {
    var gallery = $('.photo-gallery'),
        video = $('.video-gallery');

    if (gallery.length || video.length) {
        addPswp();

        var pswp = $('.pswp')[0],
            items = [];

        (gallery.length ? gallery : video).on('click', '.gallery_block', function(e) {
            e.preventDefault();

            if (gallery.length) {
                gallery.find('.gallery_block .gallery-item').each(function(i, el) {
                    var item = $(el);

                    items.push({
                        src: item.attr('href'),
                        w: item.data('width'),
                        h: item.data('height')
                    });
                });
            } else {
                items = [{
                    html: '<div class="video-wrapper"><iframe class="pswp__video" width="960" height="640" src="' + $(this).find('a').attr('href') + '?autoplay=1" frameborder="0" allowfullscreen></iframe></div>'
                }];
            }

            var index = $(this).index(),
                options = {
                    closeOnScroll: false,
                    index: index,
                    bgOpacity: 0.9,
                    showHideOpacity: true,
                    zoomEl: gallery.length > 0
                },
                photoswipe = new PhotoSwipe(pswp, PhotoSwipeUI_Default, items, options);

            photoswipe.init();
            photoswipe.listen('close', function() {
                var video = $(photoswipe.currItem.container).find('.pswp__video');

                if (video.length) {
                    video.remove();
                }
            });
        });
    }
});

function addPswp() {
    $('body').prepend('<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">\
        <div class="pswp__bg"></div>\
        <div class="pswp__scroll-wrap">\
            <div class="pswp__container">\
                <div class="pswp__item"></div>\
                <div class="pswp__item"></div>\
                <div class="pswp__item"></div>\
            </div>\
            <div class="pswp__ui pswp__ui--hidden">\
                <div class="pswp__top-bar">\
                    <div class="pswp__counter"></div>\
                    <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>\
                    <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>\
                    <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>\
                    <div class="pswp__preloader">\
                        <div class="pswp__preloader__icn">\
                          <div class="pswp__preloader__cut">\
                            <div class="pswp__preloader__donut"></div>\
                          </div>\
                        </div>\
                    </div>\
                </div>\
                <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">\
                    <div class="pswp__share-tooltip"></div>\
                </div>\
                <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>\
                <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>\
                <div class="pswp__caption">\
                    <div class="pswp__caption__center"></div>\
                </div>\
            </div>\
        </div>\
    </div>');
}

Подскажите пожалуйста что в нём нужно подкорректировать чтобы кол-во фото не прибавлялось при каждом новом открытии?

Answer 1

[xtress]

Попробуйте убрать items = []; внутрь .on('click', '.gallery_block', function(e) {

Comments

[Алексей Клёнин]

Так?

var pswp = $('.pswp')[0];

  (gallery.length ? gallery : video).on('click', '.gallery_block', function(e) {
     	items = [],
      e.preventDefault();

      if (gallery.length) {
          gallery.find('.gallery_block .gallery-item').each(function(i, el) {
              var item = $(el);

[xtress]

Алексей Клёнин, Да, примерно это я и имел в виду, у меня такое подозрение, что судя по коду список айтемов просто не очищался, т.е. объявление айтемов пустым массивом было сделано в неправильно месте.

[Алексей Клёнин]

xtress, Сделал, в результате, первый раз открывается всё корректно, а второй раз картинка открывается просто из источника, т.е. скрипт как будто её не обрабатывает.
Ну то есть не в модалке открывается, а просто как изображение в браузере.

[xtress]

Алексей Клёнин, Хорошо, а если попробовать вернуться к старому варианту, но после

if (video.length) {
                    video.remove();
                }

выполнить items = [];
Т.е. ваш код будет вида:

if (video.length) {
                    video.remove();
                }
items = [];

[Алексей Клёнин]

xtress, Ничего не происходит, всё работает по прежнему, то есть при повторном клике кол-во увеличивается.

[Алексей Клёнин]

xtress, сделал ещё раз также и заработало, благодарю за помощь.