宏伟的弹出窗口和无限滚动答案

【问题标题】：Magnific popup and infinite scrolling宏伟的弹出窗口和无限滚动
【发布时间】：2014-05-20 13:28:19
【问题描述】：

我有一个 tumblr 博客，它带有无限滚动和放大弹出窗口来可视化图像。

当我滚动到底部并加载新帖子时，magnific-popup 在加载的新帖子中不起作用，而仅在旧帖子中起作用。

如果我尝试手动转到“page-2”，一切正常。

有没有办法在加载帖子或类似的东西上重新加载 magnific-popup？

非常感谢

【问题讨论】：

标签： jquery lightbox tumblr infinite-scroll magnific-popup

【解决方案1】：

你需要做的就是在加载无限滚动时对新元素调用 .magnificPopup 方法，这样：

$YOUR_CONTAINER.infinitescroll({
    navSelector:  ".Pagination",
    nextSelector: ".Pagination-next",
    itemSelector: ".Post"
}, function( newElements ) {
    $(newElements).magnificPopup({/*your options here*/});
});

【讨论】：

我的弹出窗口现在出现但显示“正在加载”然后失败，它不会显示图像...不知道为什么？

【解决方案2】：

您可以使用onInit 事件作为回调函数。 See more

示例代码：

$('.your-class-name').infiniteScroll({
    // options
    path: '.next.page-numbers',
    append: '.post',
    history: false,
    status: '.page-load-status',
    button: '.page-load-more',
    loadOnScroll: false,
    elementScroll: true,
    hideNav: '.post-pagination',
    onInit: function() {
        this.on( 'append', function() {
            $('.your-item-class-name').magnificPopup({
                /* magnificPopup options here */
            });
        });
    }
});

【讨论】：