Configuration
Add Site Settings
Infinite Scrolling is a frontend extension that does not require a plugin.
To configure the extension, navigate to Site Management -> Sites and add the Infinite Scrolling Site Set to your Site configuration.
Adding the Infinite Scrolling Site Set
Site Settings
Go to Site Management -> Settings, select your Site configuration, and scroll down to Infinite Scrolling.
Configure the first section of Site Settings
Include jQuery
-
- Type
- boolean
- Default
- false
- Path
- infinitescrolling.includeJQueryLibrary
Enable this option to include the jQuery JavaScript library.
Scroll container selector
-
- Type
- string
- Default
- jQuery(window)
- Path
- infinitescrolling.scrollContainer
Define the jQuery selector for the scroll container.
Sample:
jQuery (window)
Item container selector
-
- Type
- string
- Default
- (none)
- Path
- infinitescrolling.container
Specify the jQuery selector for the container holding all items (e.g., news or events) to paginate.
Sample:
div.news- list- container
Item selector
-
- Type
- string
- Default
- (none)
- Path
- infinitescrolling.item
Specify the jQuery selector for a single item within the list container.
Sample:
div.news- list- item
Pagination selector
-
- Type
- string
- Default
- ul.f3-widget-paginator
- Path
- infinitescrolling.pagination
Define the jQuery selector for the paginator. This selector will hide the paginator in the frontend.
Sample:
div.news- list- browse
Next page link selector
-
- Type
- string
- Default
- li.next a
- Path
- infinitescrolling.next
Define the jQuery selector for the "Next" link in the paginator. The href attribute will be used to load and append the next page’s content.
Sample:
div.browse Links Wrap a: eq (- 2)
Configure the second section of Site Settings
Previous page link selector
-
- Type
- string
- Default
- li.previous a
- Path
- infinitescrolling.previous
Define the jQuery selector for the "Previous" link in the paginator. The href attribute of this element will be used to retrieve items from the previous page. Ensure only one element matches the selector.
Sample:
li.previous a
Custom loader icon HTML
-
- Type
- string
- Default
- <div class="ias-spinner" style="text-align: center;"><img src="|"/></div>
- Path
- infinitescrolling.loader.html
Customize the loader icon by specifying your own HTML. Use {src} to include the original loader icon from Infinite Scrolling JS.
Sample:
<div class="ias-spinner" style="text- align: center;"><img src=" |"/></ div>
Loading delay (ms)
-
- Type
- int
- Default
- 0
- Path
- infinitescrolling.delay
Set a delay (in milliseconds) before loading additional items. Increase this value to ensure the loader icon is visible longer.
Sample:
5
Auto-load limit
-
- Type
- int
- Default
- 5
- Path
- infinitescrolling.offset
Define how many times new items should be automatically loaded before displaying a manual "Load More" button. Avoid setting this too high to keep the footer accessible.
Sample:
7
Preload margin (px)
-
- Type
- int
- Default
- 200
- Path
- infinitescrolling.negativeMargin
Set the margin (in pixels) from the last item's bottom edge before the next request starts. A higher value loads items earlier.
Sample:
130