Massive popup and infinite scrolling

Question

I have a tumblr blog whit infine scrolling and magnific-popup to render an image.

When I scroll to the bottom and load new messages, magnific-popup does not work in new messages, but only in old ones.

If I try to go to the page-2 page, everything will work.

Is there a way to reload magnific-popup on boot messages or something similar?

Many thanks

Answer 1

All you have to do is call the .magnificPopup method for new items when loading infinitescroll, this way:

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

Answer 2

onInit .

:

$('.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 */
            });
        });
    }
});