Get tumblr like button to work with infinite scrolling

Question

I'm trying to get the tumblr like button to work with infinite scrolling.

Below is my code that doesn't work.

And after is a code that does work.

I am unfamiliair with Javascript so Im not sure how to mesh them to make it work

function( newElements ) {
    var $newElems = $(newElements);
    $newElems.hide();
    $newElems.imagesLoaded(function(){
        $wall.masonry( 'appended', $newElems,{isAnimated: false}, function() {
            $newElems.fadeIn('fast');
        });
    });
    }); 
$('#posts').show(0);
});

here one that works

function(newElements){
    var $newElems = $(newElements).css("opacity","0").css("pointer-events","none");
    $('.photoset-grid').photosetGrid({highresLinks: true,rel: $('.photoset-grid').attr('data-id'),gutter: '5px',onComplete: function(){}});
    $('.photoset-grid,.lightbox').each(function() {
        $(this).magnificPopup({delegate: 'a',type: 'image',gallery:{enabled:true},removalDelay: 200,mainClass: 'mfp-fade'});
    });
    var $newElemsIDs = $newElems.map(function (){return this.id;}).get();
    $newElems.imagesLoaded(function(){
        $newElems.css("opacity","1").css("pointer-events","auto");
        $K.masonry('appended',$newElems,true);
        console.log($newElems,$newElemsIDs);
        Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
    });
});

thanks for any help.

edit: my full code

$(window).load(function(){
var $wall = $('#posts');
$wall.imagesLoaded(function(){
$wall.masonry({
itemSelector: '.entry, .entry_photo',
isAnimated : false
});
});

$wall.infinitescroll({
navSelector : '#pagination',
nextSelector : '#pagination a',
itemSelector : '.entry, .entry_photo',
bufferPx : 2000,
debug : false,
errorCallback: function() {
$('#infscr-loading').fadeOut('normal');
}},
function( newElements ) {
var $newElems = $( newElements );
$newElems.hide();
$newElems.imagesLoaded(function(){
$wall.masonry( 'appended', $newElems,{isAnimated: false}, function()   {$newElems.fadeIn('fast');} );
});
}); $('#posts').show(0);
});

score 0 · Answer 1 · answered Mar 11 '14 at 20:47

0

function( newElements ) {
    var $newElems = $(newElements);
    // Get IDs for new Elements 
    var $newElemsIDs = $newElems.map(function (){return this.id;}).get();
    $newElems.hide();
    // Tell Tumblr we need new LikeButton statuses
    Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
    $newElems.imagesLoaded(function(){
        $wall.masonry( 'appended', $newElems,{isAnimated: false}, function() {
            $newElems.fadeIn('fast');
        });
    });
    $('#posts').show(0);
});

answered Mar 11 '14 at 20:47

mikedidthis

4,899
3
28
43

didn't work. I've included my full code just in case that makes a difference – Rukia Kuchki Mar 12 '14 at 16:52
@RukiaKuchki I can't see `Tumblr.LikeButton` in your code? I would maybe add an example / any error messages. Thanks. – mikedidthis Mar 12 '14 at 19:00
My full code (the last one) I added doesn't have the like button in there because I'm not sure how to use it. the middle code has it I got that code from someone else as an example. – Rukia Kuchki Mar 12 '14 at 22:11
@RukiaKuchki yeah I believe the code is from my previous answer: http://stackoverflow.com/a/16396022/2312574 – mikedidthis Mar 12 '14 at 22:19

Get tumblr like button to work with infinite scrolling

1 Answers1