So far it's working after hours of trying and researching, but only with three "static" resources (index.html, index2.html, index3.html).
Snippet-Call via context in index.html
[[!getResources?
&parents=`2,3,4,5,6,7,8`
&limit=`6`
&includeTVs=`1`
&processTVs=`1`
&tpl=`BLOCK`
&includeContent=`1`
&sortby=`{"publishedon":"DESC","createdon":"DESC"}`
]]
<a class="mehr" href="index2.html">MEHR LADEN</a>
Snippet-Call in index2.html
[[!getResources?
&parents=`2,3,4,5,6,7,8`
&limit=`6`
&offset=`6`
&includeTVs=`1`
&processTVs=`1`
&tpl=`BLOCK`
&includeContent=`1`
&sortby=`{"publishedon":"DESC","createdon":"DESC"}`
]]
Snippet-Call in index3.html
[[!getResources?
&parents=`2,3,4,5,6,7,8`
&limit=`6`
&offset=`12`
&includeTVs=`1`
&processTVs=`1`
&tpl=`BLOCK`
&includeContent=`1`
&sortby=`{"publishedon":"DESC","createdon":"DESC"}`
]]
BLOCK-Chunk
<div class="infinite">
<a onclick="return get_position();" href="[[~[[+id]]]]">
<strong><b>[[+longtitle]]</b> <span style="font-family:Arial; font-weight:bold;">//</span></strong> [[+menutitle]]
[[!getImageList? &tpl=`fancybox` &tvname=`fancyboxTv` &limit=`1` &docid=`[[+id]]`]]
[[+img.1]]
</a>
</div>
Script-Calls in the Template
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="./includes/jquery.cookie.js"></script>
<script type="text/javascript">
if (!window.console) console = {log: function() {}}; // IE8 Fix for Infinite Scroll
// set Cookie for top-position
$(document).ready(function () {
function get_position(){
var top_position = document.documentElement.scrollTop;
$.cookie('pos', top_position);
};
function set_position(){
var top_position = $.cookie('pos');
window.scrollTo(0,top_position)
$.cookie('pos', null);
};
});
</script>
// end of Cookie-Setting for top-position
// works in Opera and Safari, not in IE, FF and Chrome
<script src="./includes/infinite-scroll/jquery.infinitescroll.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// set up infinite scroll
$('.inhalt').infinitescroll({
// insert your options here
navSelector : "a.mehr:last",
nextSelector : "a.mehr:last",
itemSelector : "div.infinite",
debug : false,
animate : true,
loading : { finishedMsg: "<em>Keine weiteren Inhalte vorhanden.</em>",
msgText: "<em>Lade weitere Inhalte</em>" }
});
// unbind infinite scroll from automatically fetching the next page
jQuery(window).unbind('.infscr');
// when the a tag (class 'mehr') is clicked, fetch the next page
$('.mehr').click(function(e){
e.preventDefault();
$('.inhalt').infinitescroll('retrieve');
// the plugin currently sets 'display:none' on your nav selector
// this is probably going to change, but for the moment, just do this.
$(this).css('display','block');
// remove the paginator when we are done.
$(document).ajaxError(function(e,xhr,opt){
if (xhr.status == 404) $(".mehr-start").remove();
});
});
});
</script>
So now I have the function of a triggered infinite scroll with a working back-button in Safari and Opera, but this function doesn't work in IE, FF and Chrome (when pushing the back button I get redirected to the top of the resource, the opened "pages"/fetches from before are closed).
Because I don't want to create always a new resource with the same Snippet-call except the changing offset-value, how can I manage it dynamically with the getResources call? The other options of the getResources-Call remain the same...
☆ A M B ☆