Invinite ImageScroll - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Scan QR or Download Android App
Direkt zum Seiteninhalt

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.
Download Button
x runter geladen
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 «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt