How can I reload a script in infinite scroll

user_15365110 0
Viewed 228

Firstly, I don't know if I'm using the rights words to describe this situation. Secondly, I don't know how to code js so I will try to describe this thing as best as I can. I'm basically making a tumblr theme with masonry and infinite scroll. I'm using the latest version of both masonry and infinite scroll. Both of them work perfectly as well. The thing is, all the posts appended through infinite scroll don't seem like the initial posts. I use these codes to unnest blockquotes and tweak the photosets:

// Unnest
$('.post').unnest({
    yourCaption: ".caption, .text_body", 
    wrapName: ".tumblr_parent", 
    newCaptionUsername: true, 
    originalPostCaptionUsername: false, 
    tumblrAvatars: true, 
    tumblrAvatarClass: ".tumblr_avatar", 
    usernameColon: false 
});
// For legacy photosets
$(document).ready(function(){
    $('.photo-slideshow').pxuPhotoset({
        lightbox: true,
        rounded: false,
        gutter: '3px',
        photoset: '.photo-slideshow',
        photoWrap: '.photo-data',
        photo: '.pxu-photo'
    });
});
// For NPF photosets
var npfOptions = {
    includeCommonPhotosets: false,
    photosetMargins:"3"
}
npfPhotosets(".post", npfOptions);

The posts appended through infinite scroll don't seem to be affected by these codes at all. Here's the code for masonry and infinite scroll that I use:

var $grid = $('#posts').masonry({
    itemSelector: '.post',
    columnWidth: 1
});
$grid.imagesLoaded().progress( function() {
    $grid.masonry();
});  

// get Masonry instance
let msnry = $grid.data('masonry');

// init Infinite Scroll
$grid.infiniteScroll({
  // Infinite Scroll options...
  append: '.post',
  path: '.next_page',
  outlayer: msnry
});

What should I do to make this work?

masonry infinite-scroll jquery javascript
1 Answers

As pointed out in the comments, your initial functions should be called after every time new stuff is added to the page. You can do so by using the event provided by infinite-scroll, as follows:

var infiniteGrid = $grid.infiniteScroll({
    // Infinite Scroll options...
    append: '.post',
    path: '.next_page',
    outlayer: msnry
});
infiniteGrid.on( 'append.infiniteScroll', function( event, response, path, items ) {
    // do your thing with the new items here
});
user_22884760
Related