{"id":243,"date":"2013-01-29T14:48:19","date_gmt":"2013-01-29T14:48:19","guid":{"rendered":"http:\/\/a1webdesignteam.com\/blog\/?p=243"},"modified":"2013-01-29T14:48:19","modified_gmt":"2013-01-29T14:48:19","slug":"awesome-jquery-infinite-scrolling-plugin-showcase","status":"publish","type":"post","link":"https:\/\/a1webdesignteam.com\/blog\/awesome-jquery-infinite-scrolling-plugin-showcase\/","title":{"rendered":"Awesome jQuery Infinite Scrolling Plugin Showcase"},"content":{"rendered":"<h3>DIY jquery infinite scroll \u2013 <a href=\"https:\/\/github.com\/diy\/jquery-infinitescroll#readme\" target=\"_blank\">MORE INFO<\/a><\/h3>\n<p><a href=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/diy-jquery-infinite-scroll.jpg\"><img loading=\"lazy\" title=\"diy-jquery-infinite-scroll\" alt=\"diy-jquery-infinite-scroll\" src=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/diy-jquery-infinite-scroll_thumb.jpg\" width=\"502\" height=\"353\" border=\"0\" \/><\/a><\/p>\n<p>A jQuery plugin that provides a basic mechanism for triggering more results to be loaded when the bottom of the page is reached.<\/p>\n<h3>Infinite Pages \u2013 <a href=\"http:\/\/codecanyon.net\/item\/infinite-pages\/117040?ref=lvraa\" target=\"_blank\">MORE INFO<\/a> \/ <a href=\"http:\/\/codecanyon.net\/item\/infinite-pages\/full_screen_preview\/117040\" target=\"_blank\">DEMO<\/a> (Premium)<\/h3>\n<p><a href=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/infinite-pages1.jpg\"><img loading=\"lazy\" title=\"infinite-pages\" alt=\"infinite-pages\" src=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/infinite-pages_thumb1.jpg\" width=\"538\" height=\"338\" border=\"0\" \/><\/a><\/p>\n<p>Infinite Pages was designed for displaying large pieces of HTML data in more manageable chunks. When the reader reaches the end of the page, the script loads more content. It implements an \u2018infinite scroll\u2019 mechanism to load data, so the reader doesn\u2019t have to load enourmous amounts of text \/ images onto the page all at once. This ensures a more comfortable reading experience for the user. Infinite Pages works by \u2018paginating\u2019 your data, and then feeding that data to the user \u2018on demand\u2019. This technique is known as \u2018lazy loading\u2019, and is becoming more and more common on the internet. An example of infinite scrolling is Google Images, where content is loaded as requested by the user.<\/p>\n<h3>Create Infinite Scroll Effect Using jQuery \u2013 <a href=\"http:\/\/www.webdeveloperjuice.com\/2010\/02\/24\/create-infinte-scroll-effect-using-jquery-with-demo\/\" target=\"_blank\">MORE INFO<\/a><\/h3>\n<p><a href=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/create-infinite-scroll-effect-using-jquery.jpg\"><img loading=\"lazy\" title=\"create-infinite-scroll-effect-using-jquery\" alt=\"create-infinite-scroll-effect-using-jquery\" src=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/create-infinite-scroll-effect-using-jquery_thumb.jpg\" width=\"502\" height=\"310\" border=\"0\" \/><\/a><\/p>\n<p>This tutorial will teach you how to code an infinite scrolling effect on your website using JavaScript.<\/p>\n<h3>infini_scroll \u2013 <a href=\"https:\/\/github.com\/holtonma\/infini_scroll#readme\" target=\"_blank\">MORE INFO<\/a><\/h3>\n<p><a href=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/infini_scroll.jpg\"><img loading=\"lazy\" title=\"infini_scroll\" alt=\"infini_scroll\" src=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/infini_scroll_thumb.jpg\" width=\"502\" height=\"298\" border=\"0\" \/><\/a><\/p>\n<p>\u201cinfiniScroll\u201d was written as a jQuery plugin. It works for blog posts but will work for anything where you scroll to get more data. Just like Twitter.com, Facebook status messages, etc. Instead of paginating items, the plugin allows you to keep on scrolling. Such system works on posts and tweets but they can also be applied on leaderboards, portfolio items, anything where you want to load subsequent elements.<\/p>\n<h3>jquery-esn-autobrowse \u2013 <a href=\"https:\/\/github.com\/msjolund\/jquery-esn-autobrowse#readme\" target=\"_blank\">MORE INFO<\/a><\/h3>\n<p><a href=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/jquery-esn-auto-browse.jpg\"><img loading=\"lazy\" title=\"jquery-esn-auto-browse\" alt=\"jquery-esn-auto-browse\" src=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/jquery-esn-auto-browse_thumb.jpg\" width=\"502\" height=\"286\" border=\"0\" \/><\/a><\/p>\n<p>This plugin adds automatic ajax loading of page content when the user scrolls the page, with built-in browser cache.<\/p>\n<h3>Infinite Ajax Scroll, a jQuery plugin \u2013 <a href=\"http:\/\/www.fieg.nl\/infinite-ajax-scroll-a-jquery-plugin\" target=\"_blank\">MORE INFO<\/a><\/h3>\n<p><a href=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/infinite-ajax-scroll1.jpg\"><img loading=\"lazy\" title=\"infinite-ajax-scroll\" alt=\"infinite-ajax-scroll\" src=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/infinite-ajax-scroll_thumb1.jpg\" width=\"502\" height=\"279\" border=\"0\" \/><\/a><\/p>\n<p>Infinite Ajax Scroll is an open-source jQuery plugin that turns your existing pagination into an infinite scrolling one, with ease.<\/p>\n<h3>jQuery ScrollPagination \u2013 <a href=\"http:\/\/andersonferminiano.com\/jqueryscrollpagination\/\" target=\"_blank\">MORE INFO<\/a><\/h3>\n<p><a href=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/jquery-scroll-pagination.jpg\"><img loading=\"lazy\" title=\"jquery-scroll-pagination\" alt=\"jquery-scroll-pagination\" src=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/jquery-scroll-pagination_thumb.jpg\" width=\"502\" height=\"357\" border=\"0\" \/><\/a><\/p>\n<p>jQuery ScrollPagination plugin has been developed by Anderson Ferminiano for studying purposes. You can however, use it in any way you want on your projects for free, as long as you maintain the credits.<\/p>\n<h3>Twitter-style triggered infinite scroll \u2013 <a href=\"http:\/\/www.infinite-scroll.com\/trigger.html\" target=\"_blank\">MORE INFO<\/a><\/h3>\n<p><a href=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/twitter-style-trigerred-infinite-scroll.jpg\"><img loading=\"lazy\" title=\"twitter-style-trigerred-infinite-scroll\" alt=\"twitter-style-trigerred-infinite-scroll\" src=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/twitter-style-trigerred-infinite-scroll_thumb.jpg\" width=\"502\" height=\"329\" border=\"0\" \/><\/a><\/p>\n<p>This plugin aims to progressively enhance your page. Your navigation\/pagination elements should be present in the HTML for non-js users, but the plugin will utilize those links to build out a more rich browsing experience.<\/p>\n<h3>Load Content While Scrolling With jQuery \u2013 <a href=\"http:\/\/www.webresourcesdepot.com\/load-content-while-scrolling-with-jquery\/\" target=\"_blank\">MORE INFO<\/a><\/h3>\n<p><a href=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/load-content-with-jquery.jpg\"><img loading=\"lazy\" title=\"load-content-with-jquery\" alt=\"load-content-with-jquery\" src=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/load-content-with-jquery_thumb.jpg\" width=\"502\" height=\"185\" border=\"0\" \/><\/a><\/p>\n<p>This Ajax auto content loading can very be handy in almost every project. It loads the extra content once you reach the bottom of the page.<\/p>\n<h3>Screw \u2013 A jQuery Plugin \u2013 <a href=\"http:\/\/jasonlau.biz\/home\/jquery\/screw-a-jquery-plugin\" target=\"_blank\">MORE INFO<\/a><\/h3>\n<p><a href=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/screw.jpg\"><img loading=\"lazy\" title=\"screw\" alt=\"screw\" src=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/screw_thumb.jpg\" width=\"502\" height=\"390\" border=\"0\" \/><\/a><\/p>\n<p><em>Screw, <\/em>from scroll + view, is a jQuery plugin which loads HTML as a user scrolls the webpage. Screw will help you save bandwidth by only loading content as it is scrolled into view. Screw can also be used to create continuously scrolling, bottomless pages where content is appended to the bottom as the user scrolls.<\/p>\n<h3>Endless Scroll \u2013 <a href=\"http:\/\/www.beyondcoding.com\/2009\/01\/15\/release-jquery-plugin-endless-scroll\/\" target=\"_blank\">MORE INFO<\/a><\/h3>\n<p><a href=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/endless-scroll.jpg\"><img loading=\"lazy\" title=\"endless-scroll\" alt=\"endless-scroll\" src=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/endless-scroll_thumb.jpg\" width=\"502\" height=\"393\" border=\"0\" \/><\/a><\/p>\n<p>Endless Scroll not only helps you build highly customizable infinite scrolling effects, it also offers features not commonly seen. Such features include: The ability to up-scroll and prepend content to the beginning of the page; The ability to limit the number of available \u2018pages\u2019, i.e. data truncation; and and there are more exciting features in the works, including SEO-friendly URLs!<\/p>\n<h3>jScroll \u2013 <a href=\"http:\/\/jscroll.com\/\" target=\"_blank\">MORE INFO<\/a><\/h3>\n<p><a href=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/jscroll.jpg\"><img loading=\"lazy\" title=\"jscroll\" alt=\"jscroll\" src=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/jscroll_thumb.jpg\" width=\"502\" height=\"234\" border=\"0\" \/><\/a><\/p>\n<p>jScroll is a jQuery plugin for infinite scrolling, written by Philip Klauzinski. Infinite scrolling; also known as <em>lazy loading,<\/em> <em>endless scrolling,<\/em> <em>autopager,<\/em> <em>endless pages,<\/em> etc. is the ability to load content via <abbr>AJAX<\/abbr> within the current page or content area as you scroll down. The new content can be loaded automatically each time you scroll to the end of the existing content, or it can be triggered to load by clicking a navigation link at the end of the existing content.<\/p>\n<h3>Infinite scroll \u2013 <a href=\"https:\/\/github.com\/paulirish\/infinite-scroll#readme\" target=\"_blank\">MORE INFO<\/a><\/h3>\n<p><a href=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/infinite-scroll.jpg\"><img loading=\"lazy\" title=\"infinite-scroll\" alt=\"infinite-scroll\" src=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/infinite-scroll_thumb.jpg\" width=\"502\" height=\"235\" border=\"0\" \/><\/a><\/p>\n<p>This plugin aims to progressively enhance your page. Your navigation\/pagination elements should be present in the HTML for non-js users, but the plugin will utilize those links to build out a more rich browsing experience.<\/p>\n<h3>jQuery onScrollBeyond and scrollExtend plugins \u2013 <a href=\"http:\/\/contextllc.com\/tools\/jQuery-infinite-scroll-live-scroll\" target=\"_blank\">MORE INFO<\/a><\/h3>\n<p><a href=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/jquery-onscroll-beyond.jpg\"><img loading=\"lazy\" title=\"jquery-onscroll-beyond\" alt=\"jquery-onscroll-beyond\" src=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/jquery-onscroll-beyond_thumb.jpg\" width=\"502\" height=\"352\" border=\"0\" \/><\/a><\/p>\n<p>The scrollExtend plugin is designed to automatically load new content at the bottom of the screen (by appending to a DOM element) when the user scrolls beyond the element, much like Facebook does with their status updates. The existing infinite scroll plugin was primarily designed to integrate with WordPress, which didn\u2019t really suit my purposes.<\/p>\n<h3>Unlimited Scroll using the Twitter API \u2013 <a href=\"http:\/\/www.marcofolio.net\/webdesign\/jquery_quickie_unlimited_scroll_using_the_twitter_api.html\" target=\"_blank\">MORE INFO<\/a><\/h3>\n<p><a href=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/unlimited-scroll-using-twitter-api.jpg\"><img loading=\"lazy\" title=\"unlimited-scroll-using-twitter-api\" alt=\"unlimited-scroll-using-twitter-api\" src=\"http:\/\/cdn.tripwiremagazine.com\/wp-content\/uploads\/2013\/01\/unlimited-scroll-using-twitter-api_thumb.jpg\" width=\"502\" height=\"219\" border=\"0\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>DIY jquery infinite scroll \u2013 MORE INFO A jQuery plugin that provides a basic mechanism for triggering more results to be loaded when the bottom of the page is reached. Infinite Pages \u2013 MORE INFO \/ DEMO (Premium) Infinite Pages was designed for displaying large pieces of HTML data in more manageable chunks. When the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[9,6,7],"tags":[],"_links":{"self":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/243"}],"collection":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/comments?post=243"}],"version-history":[{"count":0,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/243\/revisions"}],"wp:attachment":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media?parent=243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/categories?post=243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/tags?post=243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}