CODEWITHSUNDEEP
javascriptjqueryajaxtumblr
Tom Chapman
Tom Chapman

Reputation: 432

Using Isotop/jQUery to columinise posts on tumblr with infinite scroll functionality

Alrigghht so It's the time old problem of script runs before images load and because it's tumblr, there's no way to get the image dimensions before it's loaded into the DOM... http://glorymode.tumblr.com/

$('#thumbnails').infinitescroll({
    navSelector  : ".next a:last",
    nextSelector : ".next a:last",
    itemSelector : "#thumbnails .thumb",
    bufferPx : 7777,
    loadingText: "<span class=\"spectrum\" style=\"diaplay:none\">hold it, cowboy!</span>" },
    function(newElements){
        //$('#thumbnails').infinitescroll("pause");
        //$('.thumb', this).imagesLoaded( function(){
            //$(this).isotope({ animationEngine : 'none', itemSelector : '.thumb', layoutMode : 'masonry' });
            $(this).isotope( 'appended', $( newElements ), function() { /*$('#thumbnails').infinitescroll("resume")*/ } ); 
        //});
    }
);

isotope supposedly includes the imagesLoaded plugin... seems to do nothing though http://isotope.metafizzy.co/docs/help.html#imagesloaded_plugin

any assistance would be great!

Upvotes: 0

Views: 905

Answers (1)

desandro
desandro

Reputation: 2894

Try this for your infinite scroll callback

function(newElements){
  var $newElems = $(newElements);
  $newElems.imagesLoaded(function(){
    $('#thumbnails').isotope( 'appended', $newElems );
  });
}

You need to call imagesLoaded on the new Elements.

Upvotes: 1

Related Questions