callback - infinite scrolling not compatible with masonry -
i'm having lot of trouble getting masonry work alongside infinite scrolling. i've done possibly can , still nothing. there wrong code, or did miss completely?
this code:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script> <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script> <script> $(window).load( function() { $('#content').masonry({ "itemselector": ".entry", "columnwidth": ".grid-sizer", }); $container.infinitescroll({ itemselector : ".entry", navselector : "#pagination", nextselector : "#pagination a", loadingimg : "", loadingtext : "<em></em>", bufferpx : 10000, extrascrollpx: 12000, }, // trigger masonry callback function( newelements ) { var $newelems = $( newelements ).css({ opacity: 0 }); // ensure images load before adding masonry layout $newelems.imagesloaded(function(){ $newelems.animate({ opacity: 1 }); $container.masonry( 'appended', $newelems, true ); }); } ); }); </script>
you loading infinite-scroll twice (1st , 4th in following code) , not see loading jquery, should first. jsfiddle narrow down other issues.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script> <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
Comments
Post a Comment