Applying an Infinite Scroll

To apply the Infinite Scroll script we should first paginate our content. On a local installation you can have, for instance, container divs on different html files. When integrated to a WordPress template, you will be loading successive pages instead. Infinite Scroll will make use of navegation links for more posts thanks to the appended method.

See the Pen Masonry – appended by David DeSandro (@desandro) on CodePen

So let’s have a go at adding support for navegation links in your markup. Place the following right when you close #container:

<nav id="page_nav">
     <div class='next'><a href="html/page2.html">Next →</a></div>

And hide it in the CSS file because there is no need to show the link:

#page_nav {visibility: hidden;}

Now activate the script by adding the following to your script section. Be careful to choose navSelector and nextSelector appropriately

          // selector for the paged navigation
          navSelector : '#page_nav',
          // selector for the NEXT link (to page 2)
          nextSelector : '.next a',
          // selector for all items you'll retrieve
          itemSelector : '.item',
               msgText: 'Hang on, loading more pics!',
               finishedMsg: '<em>No more pictures before this date</em>',
               img: 'images/loading.gif'
     // trigger Isotope as a callback
     function( newElements ) {
          // hide new items while they are loading
          var $newElems = $( newElements ).css('visibility', 'hidden');
          // ensure that images load before adding to Isotope layout
          $newElems.imagesLoaded(function() {
               // show elems now they're ready
               $newElems.css('visibility' , 'visible');
               $container.isotope( 'appended', $newElems );

Follow to next page to set up Inview.

Author: Bea Cabrera

Freelance Filmmaker with a passion for big cities, snowboard, cinema and a weakness for the smell of freshly ground coffee. Engineer & Graphic Designer in a previous life, loving and living both: art and technology.  

Leave a Reply

Your email address will not be published.

You may use these <abbr title="HyperText Markup Language">html</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


This site uses Akismet to reduce spam. Learn how your comment data is processed.