Photoswipe pswp класс не очищается после закрытия изображения

У меня есть Photoswipe (http://photoswipe.com ) галерея изображений на моем сайте, и класс css не сбрасывает / очищает, чтобы удалить представление после того, как я закрываю галерею во второй раз.

Исх.
Пользователь открывает пункт 1, AJAX заполняет рисунок(ы) в изображение div.
Пользователь щелкает изображение из пункта 1, и Photoswipe открывает изображение правильно (установив следующий класс):

class="pswp pswp--supports-fs pswp--open pswp--animate_opacity pswp--notouch pswp--css_animation pswp--svg pswp--animated-in pswp--visible"

Пользователь закрывает изображение из пункта 1, класс сбрасывается как обычно:

class="pswp"

Пользователь закрывается пункт 1 и JS/JQuery очищает весь html в picture div. Пользователь открывает пункт 2, AJAX заполняет рисунок в картинку div. Пользователь щелкает изображение из пункта 2, и Photoswipe открывает изображение, правильно устанавливая тот же класс, что и раньше.

class="pswp pswp--supports-fs pswp--open pswp--animate_opacity pswp--notouch pswp--css_animation pswp--svg pswp--animated-in pswp--visible"

aria-hidden="true"

class="pswp pswp--supports-fs pswp--open pswp--animate_opacity pswp--notouch pswp--css_animation pswp--svg pswp--animated-in pswp--visible"

Когда он должен измениться на:

class="pswp"

Это отключает все взаимодействие на веб-сайте, так как есть невидимый div/класс поверх всего. Класс должен быть каким-то образом изменен обратно на pswp.

AJAX/JS для заполнения изображения div (я добавил идентификатор к div):

if (i == 0) {

    $('#listing_photos_container').append('<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"><a href="' + json[i].image_url + '" itemprop="contentUrl" data-size="512x400" data-index="' + i + '"><img src="' + json[i].image_url + '" height="400" width="600" itemprop="thumbnail" alt="listingPhoto" class="listing-photo"></a></figure>');

} else {

    $('#listing_photos_container').append('<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject" class="listing-photo-holder"><a href="' + json[i].image_url + '" itemprop="contentUrl" data-size="512x400" data-index="' + i + '"><img src="' + json[i].image_url + '" height="400" width="600" itemprop="thumbnail" alt="listingPhoto" class="listing-photo-holder"></a></figure>');

 }

JS/JQuery для очистки фото div:

 $('#listing_photos_container').html('');

EDIT: функция прослушивания щелчка выполняется дважды, когда пользователь щелкает фотографию, чтобы вывести ее на полный экран. Это код для слушателя:

$.ajax({

    type: "POST",

    url: 'http://example.com/action?action=photos',

    data: {id: id},

    success: function (data) {

        console.log('API Call - Photos');

        json = JSON.parse(data);

        $('#listing_photos_container').html('');

        for (var i = 0; i < json.length; i++) {

            // Styling code here

        }

        $('#list_header').html(

            (function($) {

                $('.picture').each( function() {

                    var $pic = $(this),

                    getItems = function() {

                        var items = [];

                        $pic.find('a').each(function() {

                            var $href = $(this).attr('href'),

                                $size = $(this).data('size').split('x'),

                                $width = $size[0],$height = $size[1];

                            var item = {

                                src : $href,

                                w   : $width,

                                h   : $height

                            }

                            items.push(item);

                        });

                        return items;

                    }

                    var items = getItems();

                    console.log('Items for PSWP' + items); 

                    alert('Alert Point 1'); // This is called once, (as it should).

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

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

                        // This block is called twice..

                        alert('Click Funct');

                        event.preventDefault();

                        var $index = $(this).index();

                        var options = {

                            index: $index,

                            bgOpacity: 0.7,

                            showHideOpacity: true

                        }

                        // Initialize PhotoSwipe

                        alert('Setting new PhotoSwipe');

                        var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);

                        lightBox.init();

                    }); // End $pic.on

                });// End .picture each

            })(jQuery)

        ); // End list_header.html

    } // End AJAX Success

}); // End AJAX