Trouble using Infinite Scroll with Masonry callback

2 Views

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.

Read More

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). http://imgur.com/oAtJS
What am I doing wrong?

Post Views: 2

Related posts

Leave a Reply

1 comment

  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.