Bildergalerie (1)
gedruckt am 04. Feb. 2012
Eine Bildergalerie belebt eine Internetseite und ist ein interaktives und dynamisches Element auf einer Seite, das heißt, ohne die Seite neu zu laden, werden Inhalte (Bilder, Beschriftung) durch UserInnen-Aktivität geändert.
Der Bildplatzhalter
Als Bildplatzhalter wird ein <img>-Eintrag gesetzt, der mit einer Namenseigenschaft belegt wird:<img name=”galerie” src=”…” />
Der Eventhandler
Die Navigation zum Blättern durch die Galerie erhält einen Eventhandler, der angibt, bei welche Aktivität welche Javascript-Funktion ausgeführt werden soll:<a href=”#” onClick=”prev();”>zurück</a>
<a href=”#” onClick=”next();”>weiter</a>
Die Bildvariablen
In einem Script-Bereich werden die benötigten Variablen definiert. Das sind einerseits die Namen der verfügbaren Bilder, eine Indexvariable, die angibt, das wievielte Bild gerade gezeigt wird und die Anzahl der Bilder.<script language=”JavaScript”>
var bild = new Array();
bild[1] = “foto_1.jpg”;
bild[2] = “foto_2.jpg”;
bild[3] = “foto_3.jpg”;
bild[4] = “foto_4.jpg”;
i = 1; // Index
n = 4; // Anzahl der verfügbaren Bilder
</script>
Die Javascript-Funktionen
Im gleichen oder einem eigenen Script-Bereich werden die Funktionen prev() und next() definiert:<script language=”JavaScript”>
function next() {
-i++; // entspricht i=i+1;
-// die Bilder liegen im Unterordner images, das Bild wird neu gesetzt:
-document.galerie.src = “images/”+bild[i];
}
function prev() {
-i–; // entspricht i=i+1;
-// die Bilder liegen im Unterordner images, das Bild wird neu gesetzt:
-document.galerie.src = “images/”+bild[i];
}
</script>
Damit das Blättern auf die verfügbaren Bilder beschränkt wird, muss noch in beiden Funktionen eine Kontrolle für die Werte von i durchgeführt werden:<script language=”JavaScript”>
function next() {
-i++; // entspricht i=i+1;
-if (i>n) {i=1;} // die Galerie beginnt wieder von vorne
-document.galerie.src = “images/”+bild[i];
}
function prev() {
-i–; // entspricht i=i+1;
-if (i<1) {i=n;} // die Galerie beginnt von hinten
-document.galerie.src = “images/”+bild[i];
}
</script>
Um Redundanzen (hier: Wiederholung gleicher Codes) zu vermeiden, wird das Setzen des Bildes in eine eigene Funktion ausgelagert, die dann einfach erweitert werden kann:<script language=”JavaScript”>
function next() {
-i++;
-if (i>n) {i=1;}
-bildsetzen(i);
}
function prev() {
-i–;
-if (i<1) {i=n;}
-bildsetzen(i);
}
function bildsetzen(i) {
-document.galerie.src = “images/”+bild[i];
}
</script>
Erweiterung 1
Die Funktion bildsetzen(1) kann bei Abschluss des Ladevorganges der Seite aufgerufen werden, dann wird im <img> keine src-Eigenschaft benötigt:<body onload=”bildsetzen(1);”>
<img name=”galerie” />
Erweiterung 2
Wenn die Bilder beispielsweise als Bild 1 von 4 benannt werden sollen, wird ein <span> verwendet, das an der entsprechenden Stelle steht, bei mir unter dem Bild:<img name=”galerie” /><br />
<span id=”nr”></span>
Mit der id des span kann das Javascript die Beschriftung setzen, gleich nach dem Bildsetzen in der gleichen Funktion:function bildsetzen(i) {
-document.galerie.src = “images/”+bild[i];
-// Beachte die Leerzeichen in den Textstrings:
-document.getElementById(”nr”).innerHTML = “Bild “+i+” von ” + n;
}
Bei entsprechender Gestaltung mit CSS wird eine optisch ansprechende Galerie erzielt. Die einzelnen Bildernamen müssen bei statischem HTML in den Quellcode geschrieben werden, sie werden bei dynamischem HTML per Script (php) aus einem Ordner oder einer Datenbank ausgelesen und autoatisch in das Script geschrieben.
