Infinite Scroll - Infinite Scrolling

Repost from Infinite Scrolling using Custom Code:




– So it took me some time, but I’ve finally managed to make a working demo, of an Webflow infinite scrolling website. I’ve been a little bussy lately, my exams are on and so… :smile: Now, it’s not all perfect as I metion also as well on the demo site, but the basic functionality is there! :blush: It works using the Infinite Scroll plugin (www.infinite-scroll.com).


How to do it!:



Making the basic page

On the first page, where you have the container for the content that you want to be loaded (using Infinite Scroll), you add a “next link” at the bottom of the page, linking to a new page.

This page that your link, is linking to, must be a new page on your site, containing only the next section of content that you wish to be loaded into your first page. On this page, there is then another “next link”, linking to the next page, with the next section of content, that you wish to be loaded onto your page, using infinite scroll. On that page there will then be another “next link” linking to the next section of content tha you wish to be loaded in to your first page, using infintie scroll. And so on…

So you basicly just add seperate pages, containing only the next section/piece of content that you want loaded onto your site (the first page). And then links connecting these different pages. Including a link on the first page, of course.

The plugin will then, so to speak, take care of the rest, and load the content of the pages, into your first page, one after one, and that, with a loading-spinner appearing before every load (this can of course be modified in the settings of the plugin). So you thereby get the Infinte Scroll effect that you want.

It might just be 'little easier to understand, seeing the demo in design mode, so you can see the construction and the pages:
https://preview.webflow.com/preview/grid-style-infinite-scrolling-example?preview=fdd039e7139a456a6ee7f0c9f5056daf
(And please forgive me about it, but the logic of classes on this site aren’t all neat. Could be a little better… never mind :blush: :lollipop: :computer: )

Adding the plugin :rocket:

In the Custom Code tab, under settings (Adding custom code to your webflow sites header, see how to do it here) add this to your header-code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/infinite-scroll/infinite-scroll/master/jquery.infinitescroll.min.js"></script>
<script>

$.noConflict();
jQuery(document).ready(function($){
  $('.scroll').infinitescroll({
      navSelector  : '.next',    // selector for the paged navigation
      nextSelector : '.next a',  // selector for the NEXT link (to page 2)
      itemSelector : '.product-row',     // selector for all items you'll retrieve
      animate      : true,
      loadingText  : "", 
      maxPage:undefined,
      loading: {
          finishedMsg: 'No more content to load!',
          img: 'http://i.imgur.com/4zOIFXZ.gif',
          msgText: " "
        }
      });
});
</script>

– On the demo, and here on this github page: GitHub - metafizzy/infinite-scroll: 📜 Automatically add next page and on www.infinite-scroll.com there are more documentation on how to use the plugin. Some tutorials can also be found as well, online. :blush:

Oh, and here is the actual demo! :

Go rockets, and rabbits! :rocket: :rabbit2:
http://grid-style-infinite-scrolling-example.webflow.io


There might possibly, be some, smarter methods, to do this. But this is what I’ve managed to do. And it’s a start.

  • Would love to see some of the code-gurus here on the forum making an better and improved version :smile:

Best to you all! Love n’ hugs from Denmark! :denmark:
Jonatan.

[/quote]

1 Like

Continuing the discussion from Infinite Scrolling using Custom Code:

:coffee: Auto scrolling version

http://infinite-scrolling-example-auto-load.webflow.io
https://preview.webflow.com/preview/infinite-scrolling-example-auto-load?preview=6bb93f871d34167a47b9e9166fbe2c8c

Hope you like it :sunny: Let there be scrolled! :computer: :lollipop: :watermelon: :strawberry: :rocket:
<br><br>
Best to you all! Love n’ hugs from Denmark! :denmark:
Jonatan.<br><br>
[/quote]

Hmm the demo doesn’t work for me on Chrome/Mac :confused: Sorry to be that guy…

Whoopseay! Fixed that now :smiley: Sorry bout it!

The reason why it didn’t work is becaus Google Chrome is a liiitle hysterical about https security.
I had used this adress to load the source for the plugin:

<script src="https://raw.githubusercontent.com/infinite-scroll/infinite-scroll/master/jquery.infinitescroll.min.js"></script>

But actually you have to use a cdn adress, for it to work in chrome:

<script src="https://cdn.rawgit.com/infinite-scroll/infinite-scroll/master/jquery.infinitescroll.min.js"></script>

Works now! :smile:

@vincent And by the way, I’m glad that you sad it, else it wouldn’t have been fixed :blush:

Hurray I’ve seen the white rabbit :wink:

Works well indeed thanks for sharing the trick!

Can you also link to the project page so we can like it and follow your designer profile?

Shure if you would like to :blush:

:rocket: Here it goes:

https://webflow.com/website/Awesome-Long-Grid-style-Infinite-Scrolling-webflow-example-(ALGSISWE!)

and…

https://webflow.com/website/Awesome-Long-Grid-style-Infinite-Scrolling-webflow-example-auto-load-(ALGSISWEAL!)

I’m getting all stunnned by that someone actually wants to folllow mu design profile… Not much going on on it! :smile:

1 Like

Hehe, I spend a lot of time on the designers’ platform, it’s full of stuff, ideas, things to clone to study… possible to like projects and comment on them, and the Hire button is kind of cool :slight_smile:

I Agree :blush:





Awesome tip, thanks Jonatan!

I’ve just tried using this to re-create a sort of instagram-like portfolio page that keeps loading older entries, but i had a quite disappointing issue: the newly loaded items won’t work if they are lightbox links :frowning:
(meaning that if i click on any of the page2 onwards thumbnail images, nothing will happen)

Any ideas on how to work around this?