Бесконечный свиток не работает с Will Paginate и Masonry - PullRequest
Новая
       33

Бесконечный свиток не работает с Will Paginate и Masonry

0 голосов
/ 21 февраля 2012

Я использую комбинацию Masonry, Will Paginate и Infinite Scroll. Masonry и Will Paginate работают нормально, но я не могу заставить работать бесконечный свиток.

Мне кажется, что мои селекторы ошибочны, но я все еще в неведении после того, как попробую разные варианты.

Сценарий 

<script type="text/javascript">
 $(function(){

    var $container = $('#container');
    $container.imagesLoaded( function(){
      $container.masonry({
        itemSelector : 'item'
      });

    });

  });

// infinitescroll() is called on the element that surrounds 
// the items you will be loading more of
  $('#container').infinitescroll({

    navSelector  : '.pagination',            
                   // selector for the paged navigation (it will be hidden)
    nextSelector : '.pagination .next_page a',    
                   // selector for the NEXT link (to page 2)
    itemSelector : '#container .item'         
                   // selector for all items you'll retrieve
    },
    // trigger Masonry as a callback
    function ( newElements ) {
        var $newElems = $( newElements );
        $container.masonry( 'appended', $newElems );
    }
  );

</script>

Навигация 

<div class="pagination">
<span class="previous_page disabled">← Previous</span>
     <em>1</em>
     <a href="/?page=2" rel="next">2</a>
     <a href="/?page=3">3</a>
     <a href="/?page=4">4</a>
     <a href="/?page=5">5</a>
     <a href="/?page=6">6</a>
     <a href="/?page=7">7</a>
     <a class="next_page" href="/?page=2" rel="next">Next →</a>
</div>

Содержание 

<div id="container" class="masonry" style="position: relative; height: 0px;">
<script type="text/javascript" src="/javascripts/jquery.min.js?1329440016">
<script type="text/javascript" src="/javascripts/jquery.masonry.min.js?1327461530">
<script type="text/javascript" src="/javascripts/jquery.infinitescroll.min.js?1324335816">
<div class="item">

Ответы [ 2 ]

0 голосов
/ 06 апреля 2012

Ваш nextSelector должен быть .pagination a.next_page, а не .pagination .next_page a.

0 голосов
/ 24 февраля 2012

Попробуйте переместить свой бесконечный скролл внутрь.А именно, попробуйте следующее: 

$(function(){
...

  $('#container').infinitescroll({
    ...
  );
});

Надеюсь, это поможет.

...