0

I'm using a combination of the Tumblr embedded like button {LikeButton}, masonry.js, and infinitescroll.js. Yesterday I encountered an issue where scrolling to the next set of posts would render the like buttons of the previous set unclickable. This appears to be a common problem; I've found this question and attempted to implement its answer, and sometimes it seems to work - but not always!

I'm wondering if there's something in masonry that's making it not work? Here's all my jquery, including Masonry, Infinite Scroll and the like button code. Is there something I'm doing wrong? Each '.post' has an ID assigned to it as per the linked question above.

The live test site is here.

$(function() {
    var $container = $('.posts').css({
        opacity: 0
    });
    $container.imagesLoaded(function() {
        $container.animate({
            opacity: 1
        });
        $container.masonry({
            itemSelector: '.post',
            gutter: 0,
            columnWidth: function( containerWidth ) {
    return containerWidth / 3;
  }
        });
    });
    $container.infinitescroll({
        navSelector: '.pagination',
        nextSelector: '.pagination li a.pagination_nextlink',
        itemSelector: '.load',
        loading: {
            img: 'http://static.tumblr.com/jw8fmba/NRWlvha2e/loady.gif',
            donetext: ''
        }
    }, function(newElements) {
        var $newElems = $(newElements).css({
            opacity: 0
        });
        $newElems.imagesLoaded(function() {
            $newElems.animate({
                opacity: 1
            });
            $container.masonry('appended', $newElems, true);
             Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
        });
    });
});
Community
  • 1
  • 1
Emma W
  • 671
  • 1
  • 7
  • 23

0 Answers0