0

I have a page that is using masonry and infinite scroll. Everything seems to work as it should but I want my visitors to trigger the infinitie scrolling effect using a button instead that the trigger is automaticly activated. Something like Google's picture search. This is the code, and i believe that some kind of...

$("#load-more-button").click(function(){});

...could be placed somewhere...

<script type="text/javascript">

jQuery(document).ready(function($){ var $container = $('#posts');

$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector: '.post',
    isFitWindow: true
  });
});

$container.infinitescroll({
  navSelector  : '#page-nav',    // selector for the paged navigation 
  nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
  itemSelector : '.post',     // selector for all items you'll retrieve
  loading: {
      finishedMsg: 'Nothing more',
      img: 'images/ajax-loader.gif'
    }
  }, 
  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 ); 

    });
  }
);

});

Erikm
  • 69
  • 6

1 Answers1

0

Did you check out the documentation at http://www.infinite-scroll.com/? Towards the bottom, there's a section about infinite scroll on trigger.

I'm curious if you ever figured this out, as I'm having the same issue and can't seem to make it work.

John
  • 295
  • 3
  • 11