Infinite Scroll – Inhalte laden am Ende der Seite

**mike_mcfly** · 19.07.2010, 11:37

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.

**xtra** · 19.07.2010, 11:57

Indem man ein Javascript und einen ajax handler (mit der Extension ajax von A.Schempp) programmiert.

Dazu musst du definitiv selbst Entwicklungszeit veranschlagen.

Gruss
Chris

**mike_mcfly** · 19.07.2010, 19:54

Zitat von xtra

...
Dazu musst du definitiv selbst Entwicklungszeit veranschlagen.

Is schon klar, dass ich dass selbst machen darf

Ich wollt nur wissen, wo ich da ansetzen muss. Aber Dein Hinweis könnte mir da schon mal weiterhelfen...

Also das PHP-Template ändern hilft nix, meinst Du?

**Nils Riel** · 19.07.2010, 22:58

Wie wärs damit: http://davidwalsh.name/dw-content/lazyload3.php

**mike_mcfly** · 20.07.2010, 07:44

Danke. Beispiele finde ich im Netz dafür genug - auch für mein Lieblings-JS-Framework jQuery. Allerdings brauche ich Hilfe bei der Contao-Umsetzung...

**Selina** · 19.04.2011, 20:04

Hi!
Ich habe grade bei mir den Script LazyLoad ausprobiert - scheint zu funktionieren. Es handelt sich da nur um Bilder, aber gibt's bestimmt ein einfachen Script für komplette Seite.
Link zu dem Tutorial: http://deanhume.com/Home/BlogPost/la...with-jquery/22

Ich habe bei mir folgende Zeilen einfach in Template hinzufügt:

HTML-Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.lazyload.min.js"></script>

</head>
<body>

    <!-- Lazy Load --> 
    <script type="text/javascript"> 
        $(function() {
            $("img").lazyload({ placeholder: "images/grey.gif", effect: "fadeIn" });
        });
    </script>

**lex83** · 18.03.2013, 22:48

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>

**Gassi** · 20.03.2013, 11:55

Habe dein Skript mit contao 2.11.9 ausprobiert - aber da scheint es nicht laufen zu wollen.

Habe es mit der newslist versucht.... und das skript angepasst - jedoch passiert bei mir gar nichts.
Habe in tl_files einen Ordner "js" angelegt - die 2 skripte eingefügt und die pfade im Skript angepasst.
Dann habe ich statt .mod_newsarchive -> .mod_newslist verwendet.
Deinen Code dann noch im Theme eingefügt bei zusätzlichem JS.

Muss man denn noch was ausser dem Skript einstellen?! Welche Jquery Version verwendest du denn?!
Oder geht das nur mit dem news_archive?!

vielen Dank

Grüsse Gassi

**lex83** · 20.03.2013, 23:41

Hallo Gassi.

Eingebaut habe ich das aktuell mit contao 3.0.3. Sollte aber eigentlich auch mit contao 2.11 und anderen Versionen klappen.
Ggf. mal schauen ob ein jQuery "noConflict" nötig ist (http://docs.jquery.com/Using_jQuery_...ther_Libraries).
Bei contao3 geschiet das meiner Meinung automatisch bisher. Hatte zumindest bis jetzt nicht die Probleme wie bei contao 2.11 mit mootools und jQuery zeitgleich.
jQuery-Version 1.8.2 ....

- Ggf. Sämtliche "mod_newsarchive/layout_latest" ersetzen für newslisten. (oder zum testen auch das newsarchiv benutzen)
- Darauf achten, dass eine pagination bei den News eingestellt ist (1, 2, 3 etc.)
- "itemSelector :" anpassen.

Sollte so klappen.

Wie das in etwa aussehen soll wird hier gezeigt: http://isotope.metafizzy.co/demos/infinite-scroll.html oder besser hier http://reformrevolution.com/

mufg
Janik

**Gassi** · 03.04.2013, 14:59

Hey Danke,

werde es bei gelegenheit nochmals ausprobieren.....

**Gassi** · 05.02.2014, 11:34

Hi,
also nach langer Zeit habe ich es mal wieder probiert .... habe lokal alles wie gewünscht hinbekommen und habe die ganze Geschichte nun mal hochgeladen.
Und siehe da - es lädt nix mehr nach. Es erscheint immer die meldung - das es keine Enträge mehr zum laden gäbe..... obwohl die paginierung 2 Seiten hat....

Ich habe aber das isotope plugin rausgelassen und nur folgendes verwendet:

PHP-Code:


<script>

$(document).ready(function() {

    $('#main .mod_newslist').infinitescroll({

        navSelector : "div.pagination",

        nextSelector: "div.pagination ul li a.next",

        itemSelector: "#main .mod_newslist .layout_latest",

        debug: false,

        loading: {finishedMsg: "Keine weiteren Einträge...",

        img: "files/layout/ajax-loader.gif",

        msgText: "Lade weitere Einträge"},

        animate: true,

        extraScrollPx: 20,

        bufferPx : 80,

        errorCallback: function(){},

        localMode : true

    },function(arrayofNewsElems){});

 });

</script>

Das skript wird auch ausgeführt - es kommt die meldung "Keine weiteren Einräte" - also scheint es irgendwie probleme beim erkennen der zweiten Seite zu geben?!
Wie schon gesagt - offline auf meinem Xampp läufts einwandfrei.

Danke und Gruss
Gassi

**bird** · 18.12.2014, 00:13

Das Skript funktioniert problemlos auf Desktop PC, auf iPad und iPhone leider nicht. Hat jemand zufällig eine Lösung dafür?

**kaethe** · 08.02.2016, 04:45

Hi, ich hab das infinite scroll wie hier gezeigt mit contao 3.5 eingebunden ... aber es funktioniert nicht. hat jemand nen Tipp?

http://davidschultheiss.de/

**clavis** · 11.04.2016, 09:36

Also bei mir hat es mit Contao 3.5.8 auf Anhieb geklappt (mit mod_newslist).
Allerdings nur mit dem Isotope Masonry - wenn das auskommentiert wird, lädt er zwar die neuen Elemente, aber deckungsgleich hinter den alten Einträgen. Deshalb offenbar auch die Meldung "Keine weiteren Einträge ...", und es sieht aus als wäre nichts geladen worden.
Überprüfen kann man das ganz gut mit

Code: