Infinite-Scroll requests numerical page that doesn’t exist in Masonry

I found out it does load all the available posts in blog/page/2 but are overlapping on each other based on inspecting the element tab.

I’ve also searched that I’m missing the imagesLoaded code but I don’t know how to combine it with my existing vanilla script. When I try to add:

var imgLoad = imagesLoaded (msnry);
 function onAlways ( instance ) {
 console.log('all images are loaded');
 }

It does not do anything.

• This reply was modified 3 years, 8 months ago by hifumi.
• This reply was modified 3 years, 8 months ago by hifumi.

So I tried both options:

var imgLoad = imagesLoaded (masonry);
 function onAlways ( instance ) {
 console.log('all images are loaded');
 }

Which results in the error:
(index):214 Uncaught ReferenceError: masonry is not defined at (index):214
When I change it to this:

var imgLoad = imagesLoaded (.masonry);
 function onAlways ( instance ) {
 console.log('all images are loaded');
 }

This gives me:
Uncaught SyntaxError: Unexpected token '.'
So Lazyload is in the latest WordPress 5.5 update, this is automatically enabled is that correct? I’ve updated the code to reinitialize the masonry:

<script>
var msnry = document.querySelector('.masonry');
        var msnry = new Masonry( msnry, {
          itemSelector: '.item-masonry',
          columnWidth: '.size-masonry',
          initLayout: false
        });
msnry.on( 'layoutComplete', function( items ) {
  console.log( items.length );
});
msnry.layout();

var infScroll = document.querySelector('.masonry');
        var infScroll = new InfiniteScroll( '.masonry', {
          path: 'page/{{#}}',
          append: '.item-masonry',
          debug: true,
          hideNav: '.pagination',
          outlayer: msnry,
        });
</script>

I’m still getting the same issue as before.
Looks like I can’t upload custom themes at WordPress.com without upgrading.
I’ll share it via Laragon.

• This reply was modified 3 years, 8 months ago by hifumi.
• This reply was modified 3 years, 8 months ago by hifumi.
• This reply was modified 3 years, 8 months ago by hifumi.

I’ve solved why the new appended items stack on top of each other, I have columnWidth: '.size-masonry' which is nowhere to be found in the HTML, so I removed it and it’s no longer overlapping anymore. I’ve also removed the .masonry that’s encasing the get-section and changed it to the one in the get-section file.

The problem now is that I’ve made a msnry.js file and added:

var msnry = document.querySelector('.masonry');
    var msnry = new Masonry('.masonry', {
        itemSelector: '.item-masonry',
});
var infScroll = document.querySelector('.masonry');
    var infScroll = new InfiniteScroll( '.masonry', {
    path: 'page/{{#}}',
    append: '.item-masonry',
    debug: true,
    hideNav: '.pagination',
    outlayer: msnry
});

and I’ve enqueued it in the function:

function enqueue_masonry() {
        wp_enqueue_script( 'msnry', get_template_directory_uri() . '/js/msnry.js', array( 'jquery' ), '', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_masonry');

but it’s giving me the error:
Uncaught ReferenceError: Masonry is not defined
which highlights this section:
var msnry = new Masonry('.masonry', {

It works fine if I put it in the index page with the script tags but I don’t want to do that.

• This reply was modified 3 years, 8 months ago by hifumi.