Invinite ImageScroll
Scripte > Bildergalerien
jQuery Invinite Image Scroll
Verwende jQuery Infinite Image Scroll, um Webseiten Bilder mit unendlichem Bildlauf hinzuzufügen. Das Plugin lädt automatisch Webinhalte, wenn der Benutzer einen Bildlauf zur Seite durchführt (endlose Paginierung im Facebook-Stil).
Es können beliebig viele Bilddateien im Ordner "images" hinterlegt werden, diese werden nacheinander geladen, entweder automatisch oder manuell durch den Benutzer. Beide Möglichkeiten sind hier aufgeführt. Das Plugin wird über eine Frame-Datei angezeigt. die auch entsprechend inhaltlich bearbeitet werden muss, wobei der Frame-Container in der Beite größer sein sollte als der Div-Container, da sonst die vertikalen Scrollleisten erscheinen, Aber wer es mag, kann ein wenig probieren.
Die Anpassung des Style an die Webseite erfolgt in der Datei "load_style,css".
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HTML-Code in den BODY-Bereich <body>.....</body> der aufrufende Datei einfügen.
Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.html". Diese kann nicht durch einen Doppelklick ausgeführt werden, da einige Voraussetzungen vom Webserver lokal nicht vorhanden sind.
Code für den <BODY> Bereich
<div style="width: 800px; margin: 0 auto; overflow: hidden;">
<iframe src="wsX5Obj/Obj195_0/load_btn.html" style="width: 1000px; height: 300px; border: none;"></iframe>
</div>
Code Datei "load_btn.html"
<!doctype html>
<html>
<head>
<meta charset="utf-8"><title>jQuery Infinite ImageScroll</title><link href="InfiniteScroll.css" rel="stylesheet"><link href="load_style.css" rel="stylesheet"><script src="jquery-1.7.min.js"></script><script src="jquery.InfiniteScroll.js"></script><script>
$(function () {
$(".container").x5_InfiniteScroll({autoLoad: false,});
});
</script>
</head><body>
<div class="container"><div class="row-item">
<img src="images/1.jpg" alt="" /><img src="images/2.jpg" alt="" /><img src="images/3.jpg" alt="" />
</div><div class="row-item">
<img src="images/4.jpg" alt="" /><img src="images/5.jpg" alt="" /><img src="images/6.jpg" alt="" />
</div><div class="row-item">
<img src="images/7.jpg" alt="" /><img src="images/8.jpg" alt="" /><img src="images/9.jpg" alt="" />
</div><div class="row-item">
<img src="images/10.jpg" alt="" /><img src="images/11.jpg" alt="" /><img src="images/12.jpg" alt="" />
</div><div class="row-item">
<img src="images/13.jpg" alt="" /><img src="images/14.jpg" alt="" /><img src="images/15.jpg" alt="" />
</div><div class="row-item">
<img src="images/16.jpg" alt="" /><img src="images/17.jpg" alt="" /><img src="images/18.jpg" alt="" />
</div></div>
</body>
</html>
Code für den <BODY> Bereich
<div style="width: 800px; margin: 0 auto; overflow: hidden;">
<iframe src="wsX5Obj/Obj195_0/load_auto.html" style="width: 1000px; height: 300px; border: none;"></iframe>
</div>
Code Datei "load_auto.html"
<!doctype html>
<html><head>
<meta charset="utf-8"><title>jQuery Infinite ImageScroll</title><link href="InfiniteScroll.css" rel="stylesheet"><link href="load_style.css" rel="stylesheet"><script src="jquery-1.7.min.js"></script><script src="jquery.InfiniteScroll.js"></script><script>
$(function () {
$(document).x5_InfiniteScroll();
});
</script>
</head><body>
<div class="row-item">
<img src="images/1.jpg" alt="" /><img src="images/2.jpg" alt="" /><img src="images/3.jpg" alt="" />
</div><div class="row-item">
<img src="images/4.jpg" alt="" /><img src="images/5.jpg" alt="" /><img src="images/6.jpg" alt="" />
</div><div class="row-item">
<img src="images/7.jpg" alt="" /><img src="images/8.jpg" alt="" /><img src="images/9.jpg" alt="" />
</div>
</body>
</html>
» nach oben «