Skip to content

Instantly share code, notes, and snippets.

@srikat
Created January 28, 2014 02:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save srikat/8661320 to your computer and use it in GitHub Desktop.
Save srikat/8661320 to your computer and use it in GitHub Desktop.
Using Masonry in Genesis for a Pinterest like layout. http://sridharkatakam.com/using-masonry-genesis-pinterest-like-layout/
jQuery(function($) {
var $container = $('.content');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector: '.entry',
isAnimated: true,
gutterWidth: 40
});
});
});
jQuery(function($){
var $container = $('.content');
$container.infinitescroll({
navSelector : '.archive-pagination', // selector for the paged navigation
nextSelector : '.archive-pagination .pagination-next a', // selector for the NEXT link (to page 2)
itemSelector : '.content .entry', // selector for all items you'll retrieve
loading: {
finishedMsg: "<em>No more posts to load.</em>",
img: 'http://websitesetuppro.com/demos/genesis-masonry/wp-content/themes/genesis-sample/js/images/loader.gif',
msgText: "<em>Loading the next set of posts...</em>",
speed: 'fast'
},
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment