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.
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.