Photoswipe pswp class 关闭图像后不清除

Question

我的网站上有一个 Photoswipe (http://photoswipe.com) 图片库，css class 不是 resetting/clearing 在我关闭图片库后删除视图第二次了。

例如。用户打开项目 1，AJAX 将图形填充到图片 div 中。用户单击项目 1 中的图像，Photoswipe 正确打开图像（设置以下 class）：

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

用户关闭项目 1 中的图像，class 重置为正常：

class="pswp"

用户关闭项目 1，JS/JQuery 清除图片 div 中的所有 html。用户打开项目 2，AJAX 将图形填充到图片 div 中。用户单击项目 2 中的图像，Photoswipe 打开图像正确设置与以前相同的 class。

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

这就是问题所在。用户关闭项目 2 中的图像，唯一发生变化的是：

aria-hidden="true"

但是class没有清除，仍然是：

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/class。 class 需要以某种方式改回 pswp。

AJAX/JS填充图片div（我在div中添加了一个id）：

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

编辑：当用户点击照片以全屏显示时，点击侦听器功能是运行两次。这是监听器的代码：

$.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

Answer 1

您可能已经解决了这个问题，但以防其他人遇到这个问题。

如果您多次触发打开画廊而不关闭它，就会发生这种情况。可能是您注册了多个点击处理程序来打开图库，或者由于某种原因事件被触发了两次。

这是因为在 init 函数中检索并缓存了 pswp 元素的当前 class 名称，然后在销毁时恢复了 class 名称。当第二次打开而没有销毁时，_initialClassName 将设置为 class="pswp pswp--supports-fs pswp--open pswp--animate_opacity pswp--notouch pswp--css_animation pswp--svg pswp--animated-in pswp--visible"，如您所见

photoswipe.js 的第 776 行设置了初始 class

_initalClassName = template.className;

浏览器断点看打开时是否被多次调用

第 942 行以后销毁函数

destroy: function() {
    _shout('destroy');

在浏览器中设置断点以确保每次调用 open 时都会调用它

最终解决方案

问题在于，当打开弹出窗口并加载图像时，您正在 #listing_photos_container 填充照片，然后添加点击处理程序以打开 photoswipe。此点击处理程序已添加到顶部元素，因此在弹出窗口关闭时将保留，然后在下次打开时将添加一个新的点击处理程序。

要解决此问题，您只需在关闭弹出窗口时取消绑定点击处理程序，您可以在 closeListing() 函数

中的某个位置使用 $(".picture").off('click'); 来完成此操作

Answer 2

遇到了类似的问题 - 只需将 lightBox 定义为全局变量即可。并在销毁时将其定义为空。在初始化 lightBox 的函数开头，只需检查 lighBox 是否已定义，然后执行 return.

Answer 3

很简单，在每次.click(...)之前你需要写.unbind('click').

示例：

$('a#open-photoswipe').unbind('click').click(function() {
    // open photoswipe here
});

Photoswipe pswp class 关闭图像后不清除

Photoswipe pswp class Not Clearing After Closing Image

javascript

css

ajax

jquery

photoswipe