CODEWITHSUNDEEP
audiovideoscrolltumblrinfinite
White Wolf Wizard
White Wolf Wizard

Reputation: 30

Tumblr Audio & Video + Infinite Scroll

I went through a bunch of already asked/answered questions, but it still wont work for me. This is what I have so far.

static.tumblr.com/epkyugq/C0ym8qnir/jquery-1.7.1.min.js

masonry.desandro.com/jquery.masonry.min.js

masonry.desandro.com/js/jquery.infinitescroll.min.js

static.tumblr.com/epkyugq/4fmmajupw/decker.js

I'm not sure what I'm doing wrong or if its right and something needs to be added, but I would very much appreciate it if anyone could show me a step by step tutorial on how to do it. I'm a visual person, so I need to see all the coding. Thank you for taking your time to read this and thank you for the answers.

Upvotes: 1

Views: 1781

Answers (1)

graygilmore
graygilmore

Reputation: 1768

Your repair is occurring outside of the infinitescroll script. You should change it to include it, like this:

// other stuff up here
}, function( newElements ) {

    var $newElems = $(newElements).css({
        opacity: 0
    });

    $newElems.imagesLoaded(function () {
        $newElems.animate({
            opacity: 1
        });
        $container.masonry('appended', $newElems, true);
    });

    /* repair video players*/
    $newElems.find('.video').each(function(){
        var audioID = $(this).attr("id");
        var $videoPost = $(this);
        $.ajax({
            url: '/api/read/json?id=' + audioID,
            dataType: 'jsonp',
            timeout: 10000,
            success: function(data){
                $videoPost.html(data.posts[0]["video-player"]);
            }
        });
    });

    /* repair audio players*/
    $newElems.find('.player').each(function(){
        var audioID = $(this).attr("id");
        var $audioPost = $(this);
        $.ajax({
            url: '/api/read/json?id=' + audioID,
            dataType: 'jsonp',
            timeout: 10000,
            success: function(data){
               $audioPost.html(data.posts[0]["audio-player"]);
            }
        });
    });
});

I'm using $newElems.find() because we only want to load up posts that are new to the page. If you just do $('.video') you'll go through all posts, including the ones that have already been loaded.

Upvotes: 1

Related Questions