简体   繁体   English

砌体+无限滚动和PrettyPhoto灯箱

[英]Masonry + Infinite Scroll and PrettyPhoto Lightbox

This is a re-post, 这是重新发布,
I'm using Masonry plugin with infinite-scroll plugin on WordPress blog. 我在WordPress博客上使用Masonry插件和无限滚动插件。 I need to use PrettyPhoto Plugin on this blog. 我需要在此博客上使用PrettyPhoto插件。 PrettyPhoto lightbox working fine, but when Masonry loads the next set of posts (infinite scroll plugin loads the next set of post when scroll down), PrettyPhoto stops working. PrettyPhoto灯箱工作正常,但是当Masonry加载下一组帖子时(无限滚动插件在向下滚动时加载下一组帖子),PrettyPhoto停止工作。
Note: The theme I use has embedded lightbox 注意:我使用的主题具有嵌入式灯箱
I'm not a expert in jQuery so, here's the two scripts which use on the theme 我不是jQuery专家,所以这是在主题上使用的两个脚本
https://dl.dropbox.com/u/89122367/plugins.js https://dl.dropbox.com/u/89122367/plugins.js
https://dl.dropbox.com/u/89122367/scripts.js https://dl.dropbox.com/u/89122367/scripts.js
I need to use PrettyPhoto on this theme, Need some help from experts 我需要在此主题上使用PrettyPhoto,需要专家的帮助

The reason why it's not working is that Prettyphoto don't know that there are some new images to "take care of" :) . 它不起作用的原因是Prettyphoto不知道有一些新图像需要“照顾” :)。 When new items are uploaded, they dont't have Prettyphoto bind . 新项目上载时,它们没有Prettyphoto bind I think, that the easiest way is to add detection of ajax request and then fire Prettyphoto on new images. 我认为,最简单的方法是添加对Ajax请求的检测,然后在新图像上启动Prettyphoto

$(document).ajaxComplete(function() {
    $("a[rel^='prettyPhoto']").prettyPhoto(); // or any other way You use prettyPhoto
}); 

Put the abowe code to the head section of Your page, ie: 将abowe代码放在页面的头部,即:

<script>
    $(document).ajaxComplete(function() {
        $("a[rel^='prettyPhoto']").prettyPhoto(); // or any other way You use prettyPhoto
    }); 
</script>

This Should help You 这应该对你有帮助

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM