Question

I’m trying to get infinite scroll to work with masonry on a WordPress install, and I’m running into some problems.

So infinite scroll works, new posts pop under the existing posts once the navigation div is reached. However, I can’t get the callback to masonry to work.

This is the code I’m using to get Masonry going:

var $container = jQuery('.tt');

    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector: '.tt_post',
        columnWidth: 240,
        gutterWidth: 10
      });
    });

And this is what I’m using as callback:

function(newElements) {
        // hide new items while they are loading
        var $newElems = $(newElements).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true );
        });

This can be seen at http://youworkit.co.uk/home/.

The javascript error this is being thrown is ‘function statement requires a name’ at function(newElements). https://i.stack.imgur.com/2EOAv.jpg
What am I doing wrong?

Answer 1

It turned out this was due to an extra copy of jQuery being loaded by an overzealous plugin. Since it has been disabled the callback works with this code:

// hide new items while they are loading
var $newElems = jQuery(newElements).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});

Hope this helps someone.