Jump to:

1851 Posts in 1605 Topics by 561 members

Blog Module

SilverStripe Forums » Blog Module » Infinite Scrolling using infinitescroll jquery plugin

Discuss the Blog Module.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 1821 Views
  • tlarevo
    Avatar
    Community Member
    2 Posts

    Infinite Scrolling using infinitescroll jquery plugin Link to this post

    I want to implement infinite scrolling in the BlogHolder, I've tried this using the Infinite-Scrolling jQuery plugin found at http://www.infinite-scroll.com/ even though I follow the common instructions to setup the plugin, its not working at all. Can someone give an idea how to get it to work or give me a similar solution for Silverstripe that works(I have attached the Jquery plugin). Thank you

    Attached Files
  • AndrewLowther
    Avatar
    Community Member
    3 Posts

    Re: Infinite Scrolling using infinitescroll jquery plugin Link to this post

    I've forked infinite scroll myself in order to fix this, as we're having the same issue.

    I've added an option called currPageIncrement in state, so that you can pass whatever number you need to make it work, the code is here:

    https://github.com/AndrewLowther/infinite-scroll

  • EDi
    Avatar
    Community Member
    5 Posts

    Re: Infinite Scrolling using infinitescroll jquery plugin Link to this post

    Hi! Can someone help me with this? I'm getting a "Sorry, we couldn't parse your Next (Previous Posts…, and kindly ask for help at infinite-scroll.com." error and don't know how to get it work.

    I think a link to the SS site using this plugin will be enough, but if you like to examine the code, here it goes.

    SS 3.0.5

    JS:

    // infinite scroll
    $('#content.PortfolioHolder').infinitescroll({
       navSelector : "#pagination",
       nextSelector : "#pagination a#next",
       itemSelector : "#content article.thumb",
       debug : true,
       dataType : 'html',
    }, function(newElements){
       window.console && console.log('context: ',this);
       window.console && console.log('returned: ', newElements);
    });

    HTML:

    <section id="content" class="PortfolioHolder">
    <article class="thumb">Blah...</article>
    <article class="thumb">Blah...</article>
    <article class="thumb">Blah...</article>

    <section id="pagination">
    <a id="next" href="http://localhost:8888/hopa/portfolio/?start=4">Next</a>
    </section>
    </section>

  • EDi
    Avatar
    Community Member
    5 Posts

    Re: Infinite Scrolling using infinitescroll jquery plugin Link to this post

    Nevermind...

    I have found another solution.
    Infinite Ajax Scroll

    JS:

       // infinite ajax scroll
       jQuery.ias({
          container : '#content.PortfolioHolder',
          item: 'article.thumb',
          pagination: '#pagination',
          next: '#pagination a#next',
          loader: '<img src="' + $('base').attr('href') + 'themes/hopa/img/loader.gif"/>',
          triggerPageThreshold: 2,
          onRenderComplete: function(){ $(window).trigger('resize'); },
          history : false,
       });

    1821 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.