Infinite Scroll – Inhalte laden am Ende der Seite
Tach och,
ich möchte gerne auf die Paginierung (weiter zu Seite 2,3,4,...) verzichten und lieber einen Infinite Scroll nutzen.
Demo z.B. hier: http://lookslikegooddesign.com/
Der Effekt: wenn man zum Ende der Seite scrollt, wird weiterer Inhalt geladen.
Wie kann man dass mit Contao umsetzen?
Danke schon mal im Voraus. :cool:
Isotope + Infinity scroll für contao - Lösung
Vielleicht für andere noch interessant.
Hiermit sollte das wunderbare "isotope"-Plugin mit Infinity-scroll unter contao klappen, hier als Bsp. für News (natürlich auch ohne Isotope, dann einfach das iso-zeug weglassen):
HTML-Code:
<script src="files/js/jquery.isotope.min.js"></script>
<script src="files/js/jquery.infinitescroll.min.js"></script>
<script>
$(window).load(function(){
$('.mod_newsarchive').isotope({
itemSelector : '.layout_latest',
layoutMode : 'masonry'
}); <!-- Isotope -->
<!-- Infinity-scroll -->
$('#main .mod_newsarchive').infinitescroll({
navSelector : "div.pagination",
nextSelector : "div.pagination ul li a.next",
itemSelector : "#main .mod_newsarchive div.layout_latest",
debug : false,
loading : {
finishedMsg : "Keine weiteren Einträge ...",
img : "Pfad/to/ajax-loader.gif",
msgText : "Lade mehr Einträge ....."
},
<!-- das folgende hier kann auch weggelassen werden -->
animate : true,
extraScrollPx : 10,
bufferPx : 30
},
<!-- Ab hier für Isotope ... innerhalb des scriptes für den infinity-scroller -->
// call Isotope as a callback
function( newElements ) {
$('.mod_newsarchive').isotope( 'appended', $( newElements ) );
}
);
});
</script>