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

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -