jQuery Automatic Gallery
Scripte > Bildergalerien
Simple Automatic Gallery mit jQuery
Ein sehr einfaches jQuery-Plugin für rotierende Banner mit minimalem CSS und Javascript. Dieses Skript dreht alles (Banner, Bilder, Werbung usw.) auf der Seite. Es kann festlgelegt werden, wie lange jedes Banner angezeigt werden soll, bevor es zum nächsten wechselt, und wie oft sich die Banner drehen. Die Banner (usw.) werden in einer verknüpften Liste auf der Webseite selbst platziert und sind anfangs nicht sichtbar, bis das Skript sie anzeigt. Im Ordner "img" werden nur die Bilder in entsprechender Größe hinterlegt. Die Größendarstellung für die Ausgabe in der Gallery muss in der CSS-Datei nur noch eingestellt werden. Fertig.
Es kann alles zwischen <li> und </li> platziert werden, wenn overflow: hidden für den Container verwendet wird.
Es wird empfohlen, dass beim Banner eine Breite auf `<li>` eingestellt wurd, andernfalls wird die Breite des Containers verwendet.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>.....</head> und 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 auch durch einen Doppelklick ausgeführt werden.
Einstellungen in der "jquery.simplebanner.js": | |||||||||||||||||||||||||
Name | Standard | Bezeichnung | |||||||||||||||||||||||
indicators | `true` | Fügt Folienindikatoren unten hinzu | |||||||||||||||||||||||
autoRotate | `true` | Rotieren automatisch durch alle Banner | |||||||||||||||||||||||
maxRotations | `null` | Wenn „autoRotate“ „true“, stoppt die automatische Drehung am Ende | |||||||||||||||||||||||
pauseOnHover | `5000` | Wenn „autoRotate“ „true“, wird der Timer angehalten, wenn die Maus über Banner bewegt wird | |||||||||||||||||||||||
rotateTimeout | `5000` | Wenn „autoRotate“ „true“, wird gesteuert wie lange jedes Banner angezeigt wird (in ms) | |||||||||||||||||||||||
animTime | `300` | Steuert die Geschwindigkeit, mit der die Rotationsanimation abläuft (in ms) | |||||||||||||||||||||||
onChange | `null` | Eine Rückruffunktion, die aufgerufen wird, wenn sich die Folie ändert |
Code für den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj133_0/jquery.simplebanner.css"/>
<!-- Hinweis:
Wer jQuery ohnehin auf seiner Seite eingebunden hat, braucht die erste Zeile des folgenden Codes nicht mehr. -->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="wsX5Obj/Obj133_0/jquery.simplebanner.js"></script>
<style>
#siteWpr { width: 640px; margin: 0 auto; /* Breite der Bildanzeige */ }
</style>
<script>
$(document).ready(function(){
$('.simpleBanner').simplebanner();
});
</script>
Code für den <BODY> Bereich
<div id="siteWpr">
<div class="simpleBanner">
<div class="bannerListWpr">
<ul class="bannerList">
<li><img src="wsX5Obj/Obj133_0/img/natur_01g.jpg" /></li><li><img src="wsX5Obj/Obj133_0/img/natur_02g.jpg" /></li><li><img src="wsX5Obj/Obj133_0/img/natur_03g.jpg" /></li><li><img src="wsX5Obj/Obj133_0/img/natur_04g.jpg" /></li><li><img src="wsX5Obj/Obj133_0/img/natur_05g.jpg" /></li><li><img src="wsX5Obj/Obj133_0/img/natur_06g.jpg" /></li>
</ul></div><div class="bannerControlsWpr bannerControlsPrev">
<div class="bannerControls"></div>
</div><div class="bannerIndicators">
<ul></ul>
</div><div class="bannerControlsWpr bannerControlsNext">
<div class="bannerControls"></div>
</div>
</div>
</div>
Code Datei "style.css"
.simpleBanner {
overflow: hidden;position: relative;width: 640px; /* Breite der Bildanzeige */padding: 0 0 6px 0;
}
.simpleBanner.hiddenArrows .bannerControlsWpr,
.simpleBanner.hiddenIndicators .bannerIndicators { display: none; }
.simpleBanner ul { list-style: none; margin: 0; padding: 0; }
.simpleBanner .bannerListWpr { clear: both; overflow: hidden; }
.simpleBanner .bannerListWpr ul { width: 50000px; overflow: hidden; }
.simpleBanner .bannerListWpr ul li { float: left; width: 640px; } /* Breite der Bildanzeige */
.simpleBanner .bannerListWpr ul li img { display: block; }
.simpleBanner .bannerControlsWpr { cursor: pointer; padding: 10px 12px; position: absolute; top: 37%; background: #CCC; }
.simpleBanner .bannerControlsPrev { border-radius: 0 5px 5px 0; left: 0; padding-left: 5px; }
.simpleBanner .bannerControlsNext { border-radius: 5px 0 0 5px; right: 0; padding-right: 5px; }
.simpleBanner .bannerControlsPrev .bannerControls {
border-color: transparent #3f3f3f transparent transparent;border-width: 20px 20px 20px 0;
}
.simpleBanner .bannerControlsNext .bannerControls {
border-color: transparent transparent transparent #3f3f3f;border-width: 20px 0 20px 20px;
}
.simpleBanner .bannerControlsPrev: hover .bannerControls { border-color: transparent #FFF transparent transparent; }
.simpleBanner .bannerControlsNext: hover .bannerControls { border-color: transparent transparent transparent #FFF; }
.simpleBanner .bannerControls { width: 0; height: 0; border-style: solid; }
.simpleBanner .bannerIndicators {
background: transparent;right: 20px;opacity: 0.9;padding: 4px 8px 4px 0;position: absolute;bottom: 25px;
}
.simpleBanner .bannerIndicators ul { overflow: hidden; }
.simpleBanner .bannerIndicators .bannerIndicator {
background: #5D5D5D;border-radius: 7px 7px 7px 7px;cursor: pointer;float: left;height: 15px;margin-left: 8px;width: 15px;
}
.simpleBanner .bannerIndicators .bannerIndicator: hover { background: #FFF; }
.simpleBanner .bannerIndicators .bannerIndicator.current { background: #FF7E00; cursor: default; }
» nach oben «