चरण 1
Https://quithub.com/paulirish/infinite-scroll से jquery.infinitescroll.min.js डाउनलोड करें और इसे /sites/all/themes/YOURTHEME/js/js.in.infinitescroll.min.js में डालें।
चरण 2
अपनी थीम के .info फ़ाइल में जावास्क्रिप्ट फ़ाइल जोड़ें।
चरण 3
निम्नलिखित कोड वाले एक कस्टम जावास्क्रिप्ट फ़ाइल /sites/all/themes/YOURTHEME/js/YOURTHEME.js बनाएं।
/**
* Implementation of autopager @see https://github.com/paulirish/infinite-scroll
* All views that have the "autopager" class will have an autopager
*/
Drupal.behaviors.viewsInfiniteScroll = function(context) {
$(function(){
var $container = $('div.autopager div.view-content');
$container.imagesLoaded( function(){
$container.infinitescroll({
navSelector : 'div.autopager .pager', // selector for the paged navigation
nextSelector : 'div.autopager .pager-next a', // selector for the NEXT link (to page 2)
itemSelector : 'div.autopager .views-row', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: '/sites/all/themes/YOURTHEME/images/loading.gif'
}
})
})
});
}
चरण 4
अनंत स्क्रॉल लोडर का सीएसएस जोड़ें
#infscr-loading {
position: fixed;
text-align: center;
bottom: 300px;
left: 42%;
z-index: 100;
background: white;
background: hsla( 0, 0%, 100%, 0.9 );
padding: 20px;
color: #222;
font-size: 15px;
font-weight: bold;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
चरण 5
सुनिश्चित करें कि jquery संस्करण 1.7.1 से नया है। Drupal में jQuery के नए संस्करण को स्थापित करने के लिए http://drupal.org/node/1058168 में वर्णित विधियों में से एक का उपयोग करें ।