gbBgImage v1.1
Mit gbBgImage können ein oder mehrere Hintergrundbilder auf Ihre Seite angelegt, die sich automatisch auf die Browsergröße anpassen (Fullscreen) und sich im wechsel einblenden.
Demo
» gbBgImage Demo herunterladen
Einbinden
- Laden Sie die benötigt Daten » hier herunter.
- Binden Sie die JavaScript Dateien in Ihrer Seite ein.<script type="text/javascript" src="js/moo1.3.1_compile"></script>
<script type="text/javascript" src="js/gbbgimage_compile.js"></script> - Weisen Sie der Klasse die Bilder (imgAr) zu.
duration, transition, delay, opacity, curIdx und altDir kann optional angegeben werden.<script type="text/javascript">
var gbBgImageOpt = {
imgAr: ["Andromeda.jpg", "Carina-nebula.jpg", "Saturn.jpg"],
duration: 1,
transition: Fx.Transitions.Expo.easeInOut,
delay: 3,
opacity: 100,
curIdx: 1,
altDir: "img/"
}
</script> - Die JavaScript Klasse wird automatisch aufgerufen, wenn die Webseite vollständig geladen ist.
Erläuterung
- imgAr
Tragen Sie hier die Bilder in einen Array ein.
Z.B.imgAr: ["path/myimage1.jpg", "path/myimage2.jpg"] - duration
Diese Zahl beeinflusst die Animations-Geschwindigkeit. Je höher der Wert, desto langsamer läuft die Animation ab.
Z.B.duration: 0.8 - transition
Diese Einstellung gibt die Art der Animation an.
Mehr dazu finden Sie bei » MooTools
Z.B.transition: Fx.Transitions.Expo.easeInOut - delay
Hier können Sie die Verzögerung in Sekunden zwischen den Bildwechsel eintragen.
Z.B.delay: 3 - opacity
Dieser Wert gibt die Deckkraft des Bildes an.
Z.B.opacity: 40 - curIdx
Mit diesen Wert können Sie beeinflussen mit welchem Bild Sie beginnen möchten.
Z.B.curIdx: 1 - altDir
Hier können Sie einen alternativen Pfad zu den Bilder hinzufügen.
Z.B.altDir: "img/"
