Sunday 15 July 2012

javascript - Masonry plugin returning error when used with Infinite Scroll in tumblr -



javascript - Masonry plugin returning error when used with Infinite Scroll in tumblr -

i know alot has been written this, sense close solving issue.

i trying utilize theme has masonry installed, client asking infinite scroll , causing me issues.

initially seeing errors in console both masonry , infinite scroll plugins, @ to the lowest degree seeing masonry error. , though infinite scroll function calling subsequent pages of posts, it's masonry struggling append them page in right layout.

i think callback function, worried may need phone call imagesloaded function (this plugin called via theme).

i have re-create of current theme here: http://kod-temp.tumblr.com/

the inline script looks this:

var $wall = $('#posts'); $(window).load(function () { // grid $wall.masonry({ columnwidth: 84, itemselector: '.post:visible' }); // infinite scroll $('#posts').infinitescroll({ navselector : ".pagination", // selector paged navigation (it hidden) nextselector : ".pagination a:first", // selector next link (to page 2) itemselector : "#posts .post" // selector items you'll retrieve }, // trigger masonry callback function( newelements ) { var $newelems = $( newelements ); $wall.masonry( 'appended', $newelems ); } );

the markup follows simple block this:

<div id="posts"> <article class="post"></div> </div>

the error is:

uncaught typeerror: undefined not function masonry.js:10

(http://static.tumblr.com/qlf79cn/tgeleg9g0/masonry.js)

well have working code on this. js looks this:

(function () { var $tumblelog = $('#posts'); $tumblelog.infinitescroll({ navselector: ".pagination", nextselector: ".pagination a:last-child", itemselector: "article", }, function (newelements) { var $newelems = $(newelements).css({ opacity: 0 }); $newelems.imagesloaded(function(){ $newelems.animate({ opacity: 1 }); $tumblelog.masonry('appended', $newelems); }); }); $tumblelog.imagesloaded(function(){ $tumblelog.masonry({ columnwidth: 84 }); }); })();

the imagesloaded script required (as question has been raised me here).

javascript jquery infinite-scroll masonry

No comments:

Post a Comment