javascript - Tumblr Masonry with PXU Photoset Issue -
i have issue pxu photoset extended not loading when use masonry tumblr theme. know causes it, sadly have no clue how fix it.
the thing found reduced flickering while masonry loaded, hide container css (display:none) , unhide when loading masonry script.
it seems had odd side-effect of pxu photoset script not rendering images (they're cut off , jump real size when resizing window).
so use code call masonry, imagesloaded , infinite scroll:
$(document).ready(function(){ var $container = $('#container'); $container.imagesloaded(function(){ $container.show(); $container.masonry({ itemselector: 'article', gutter: 50, isfitwidth: true, }); }); $container.infinitescroll({ navselector : '#pagination-infinite', // selector paged navigation nextselector : '#pagination-infinite a.next', // selector next link (to page 2) itemselector : 'article', // selector items you'll retrieve animate: true, extrascrollpx: 310, bufferpx: 40, loading: { msgtext: '', finishedmsg: '', img: 'http://static.tumblr.com/amhdmud/imbn235bd/1x1.png' } }, // trigger masonry callback function( newelements ) { // hide new items while loading var $newelems = $( newelements ).css({ opacity: 0 }); // ensure images load before adding masonry layout $newelems.imagesloaded(function(){ // show elems they're ready $container.masonry( 'appended', $newelems, true ); }); }); });
and pxu photoset extended:
$(document).ready(function() { $('.photo-slideshow').pxuphotoset({ 'rounded' : 'false', // corners, or false }, function() { // callback }); });
the thing made photosets display right involved removing display: none; container, masonry flickered out of container on page load again, seem unable fix other way.
any appreciated,
thank you.
the pxu photoset plugin requires photosets on page visible can calculate available area. instead of using display: none;
on container try using visibility: hidden;
, change visibility: visible;
after masonry has finished.
also, you'll want make sure photoset plugin running before masonry makes first pass on theme.
Comments
Post a Comment