我的网站上有一个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"
class="pswp"
用户关闭第1项,JS / JQuery清除图片div中的所有html.用户打开第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 / 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
解决方法:
您可能已经解决了这个问题,但万一其他人也会这样做.
如果您在不关闭图库的情况下多次触发打开图库,就会发生这种情况.您可能已经注册了多个点击处理程序来打开图库,或者由于某种原因,该事件被触发了两次.
这是因为在init函数中检索并缓存了pswp元素的当前类名,然后在销毁时恢复类名.当第二次打开而没有被称为_initialClassName的破坏时,将被设置为class =“pswp pswp – supports-fs pswp – open pswp – animate_opacity pswp – notouch pswp – css_animation pswp – svg pswp – animated-in pswp – 可见“正如你所见
photoswipe.js的第776行,其中设置了initialclass
_initalClassName = template.className;
在浏览器中断点,查看打开时是否多次调用它
942行以后破坏功能
destroy: function() {
_shout('destroy');
最终解决方案
问题是当打开弹出窗口并加载图像时,您正在用照片填充#listing_photos_container,然后添加一个单击处理程序来打开photoswipe.此单击处理程序将添加到顶部元素,因此将在弹出窗口关闭时保留,然后在下次打开时将添加新的单击处理程序.
要解决此问题,您只需要在关闭弹出窗口时取消绑定点击处理程序,您可以使用$(“.picture”).off(‘click’);在closeListing()函数内的某个地方
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
