Joomla Templates Club 406,261 posts

[tom_laan84 Friend tom_laan84Join date: June 2008Posts: 348Downloads:142Uploads:30 Thanks: 88 Thanked: 67 times in 11 posts]

#186247

Hi Joomlart,

Is it possible, easy (like is it an plugin), to implement the ARGO infinite scroll to J3 T3 blank in blog layout ?

I’ve been building a new site for myself on T3 blank and man would this feature be awesome for my portfolio section! http://2013.tlwebdesign.nl

Response greatly appreciated!

Regards

Tom

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#488218

Hi Tom,

First, please check out JA Argo for more detail.

Here the steps to build infinity scroll to your T3 Blank. But you need to backup your working copy. This is a long customization. :laugh:
1. Copy ja_argo/js/jquery.infinitescroll.js (jquery.infinitescroll.min.js) and ja_argo/js/script.js from JA Argo to your /js folder
2. Copy ja_argo/etc/assets.html to your /etc folder
3. Open assets.html and delete those markup you are not use. Just keep these twos
<file>js/jquery.infinitescroll.js</file>
<file>js/script.js</file>

4. Modify script.js to

(function($){
$(document).ready(function(){

//initilized infinitescroll
(function(){
var itemSelector = '.items-row',
contentSelector = '.infinitescroll',
infinitescroll = $('.infinitescroll');

if(!infinitescroll.length){
return false;
}

var pathObject = {
init: function(){
this.path = ($('#page-next-link').attr('href') || '');
var match = this.path.match(/((page|limitstart|start)[=-])(d*)(&*)/i);
if(match){
this.type = match[2].toLowerCase();
this.number = match[3];
this.limit = this.type == 'page' ? 1 : this.number;
this.number = this.type == 'page' ? this.number : 1;
} else {
this.type = 'unk';
this.number = 2;
this.path = this.path + (this.path.indexOf('?') == -1 ? '?' : '') + 'start=';
}

var urlparts = this.path.split('#');
if(urlparts[0].indexOf('?') == -1){
urlparts[0] += '?tmpl=component';
} else {
urlparts[0] += '&tmpl=component';
}

this.path = urlparts.join('#');
},

join: function(){
if(pathObject.type == 'unk'){
return pathObject.path + pathObject.number++;
} else{
return pathObject.path.replace(/((page|limitstart|start)[=-])(d*)(&*)/i, '$1' + (pathObject.limit * pathObject.number++) + '$4');
}
}
};
pathObject.init();

infinitescroll.infinitescroll({
loading: {
finished: undefined,
finishedMsg: T3JSVars.finishedMsg,
img: T3JSVars.tplUrl + '/images/ajax-load.gif',
msg: null,
msgText: T3JSVars.msgText,
selector: null,
speed: 'fast',
start: undefined
},
state: {
isDuringAjax: false,
isInvalidPage: false,
isDestroyed: false,
isDone: false, // For when it goes all the way through the archive.
isPaused: false,
currPage: 0
},
debug: false,
behavior: undefined,
binder: $(window), // used to cache the selector for the element that will be scrolling
nextSelector: '#page-next-link',
navSelector: '#page-nav',
contentSelector: contentSelector, // rename to pageFragment
extraScrollPx: 150,
itemSelector: itemSelector,
animate: false,
pathParse: pathObject.join,
dataType: 'html',
appendCallback: true,
bufferPx: 350,
errorCallback: function () { },
infid: 0, //Instance ID
pixelsFromNavToBottom: undefined,
path: pathObject.join, // Can either be an array of URL parts (e.g. ["/page/", "/"]) or a function that accepts the page number and returns a URL
prefill: false, // When the document is smaller than the window, load data until the document is larger or links are exhausted
maxPage: undefined // to manually control maximum page (when maxPage is undefined, maximum page limitation is not work)
}, function(){
if(typeof DISQUSWIDGETS != 'undefined'){
DISQUSWIDGETS.getCount();
} else if(typeof disqus_shortname != 'undefined') {
$.getScript('http://'+disqus_shortname+'.disqus.com/count.js');
}
});

})();

})(jQuery);

5. Copy ja_argohtmlcom_contentcategoryblog.php to your template folder
Modified it in the way you want but you must keep
– “infinitescroll” class on the outter most <div>
– “items-row” class on children <div>
– Paging block

<?php
// Build the additional URL parameters string.
$urlparams = '';
if (!empty($this->pagination->_additionalUrlParams))
{
foreach ($this->pagination->_additionalUrlParams as $key => $value)
{
$urlparams .= '&' . $key . '=' . $value;
}
}
$next = $this->pagination->get('pages.current') * $this->pagination->limit;
$nextlink = JRoute::_($urlparams . '&' . $this->pagination->prefix . 'limitstart=' . $next);
?>
<div id="page-nav">
<a id="page-next-link" href="<?php echo $nextlink ?>"></a>
</div>

You should check it.

Please note: In script.js, we are using T3JSVars object
You should copy this object in ja_argotplsblockshead.php

<script type="text/javascript">
var T3JSVars = {
baseUrl: '<?php echo JUri::base(true) ?>',
tplUrl: '<?php echo T3_TEMPLATE_URL ?>',
finishedMsg: '<?php echo addslashes(JText::_('TPL_JSLANG_FINISHEDMSG')) ?>',
msgText: '<?php echo addslashes(JText::_('TPL_JSLANG_MSGTEXT')) ?>',
ajaxTimeout: '<?php echo addslashes(JText::_('TPL_JSLANG_AJAXTIMEOUT')) ?>',
pageNotFound: '<?php echo addslashes(JText::_('TPL_JSLANG_PAGENOTFOUND')) ?>',
pageNotFoundDesc: '<?php echo addslashes(JText::_('TPL_JSLANG_PAGENOTFOUND_DESC')) ?>'
};
</script>

Please copy it to your head.php block and change the language define.

Hope it helps.

Regards

2 users say Thank You to Wall Crasher for this useful post

1. Arvind Chauhan
2. phong nam

[Author]

Posts