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