CODEWITHSUNDEEP
javascriptjqueryhtmljquery-masonryinfinite-scroll
Marc Ster
Marc Ster

Reputation: 2316

jQuery masonry infinite scroll set up

I know there a several questions about is, checked them all but just can't get it to work since I don't understand how to begin...

I have the basic masonry setup:

http://jsfiddle.net/Lj0q8fe6/

Now how can I set how many elements are shown at first and how can I trigger to start loading the next elements with infinite scoll? Please help

I have found a lot like this:

 jQuery(window).load(function(){

jQuery('.hfeed').masonry({
    singleMode: true, 
    itemSelector: '.box'
});

jQuery('.hfeed').infinitescroll({
  navSelector  : '.pagination',  // selector for the paged navigation 
  nextSelector : '.pagination .next',  // selector for the NEXT link (to page 2)
  itemSelector : '.box',     // selector for all items you'll retrieve
  loadingImg : '/wp-content/themes/sprppl/images/loader.gif',
  loadingText  : "Loading...",
  donetext  : 'No more pages to load.',
  debug: false,
  errorCallback: function() { jQuery('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');   }
  },
  // call masonry as a callback
  function( newElements ) { jQuery(this).masonry({ appendedContent: jQuery( newElements ) }); }
);      

});

But when I insert it, nothing happens.. How to start here?

Upvotes: 1

Views: 1889

Answers (1)

Macsupport
Macsupport

Reputation: 5444

Here is a

jsFiddle

with your javascript external resources corrected and fixed code as well as some infinitescroll code. You will need to make an index2.html page with your items to load to test it out since there is no way for me to put one in the fiddle. The easiest way to test is to duplicate a page and call it index2.html.

$(document).ready(function() {
var $container = $('#content');
$container.imagesLoaded(function() {
// Initialize Masonry
$container.masonry({
    columnWidth: 320,
    itemSelector: '.item',
    isFitWidth: true,
    isAnimated: !Modernizr.csstransitions
});

});
$container.infinitescroll({
  navSelector  : 'a#next',  // selector for the paged navigation 
  nextSelector : 'a#next',  // selector for the NEXT link (to page 2)
  itemSelector : '.box',     // selector for all items you'll retrieve
  loading: {
      finishedMsg: 'No more pages to load.',
      img: 'http://i.imgur.com/6RMhx.gif',
      msgText: "<em>Loading the next set of posts...</em>"
    },
errorCallback: function() { $('#infscr-loading').animate({opacity: 0.8},2000).fadeOut('normal');      }
 },
// call masonry as a callback
  function( newElements ) {
var $newElems = $( newElements );
$container.masonry( 'appended', $newElems );
}
);      
});

Upvotes: 2

Related Questions