Bildergalerie (3)
gedruckt am 04. Feb. 2012
Eine modifizierte und automatische Bildergalerie könnte folgenderweise aussehen:
Der Quelltext für die drei kleinen Vorschaubilder und für das große Bild sieht dann folgendermaßen aus:
<body onLoad=”bilder()”>
<h2>open.day BHAK.BHAS Freistadt</h2>
<img name=”galerie1″ width=”128″ height=”96″ border=”1″>
<img name=”galerie2″ width=”124″ height=”92″ border=”3″>
<img name=”galerie3″ width=”128″ height=”96″ border=”1″>
<br />
<img name=”galerie” width=”400″ height=”300″ border=”1″>
<br />
<span id=”nr”></span>
</body>
Der Javascript-Quellcode mit den Variablen und den Funktionen sieht so aus:
<SCRIPT language=”JavaScript”>
<!–
var bild = new Array()
bild[1] = “CIMG2374.jpg”
…
bild[127] = “PICT1075.jpg”
bild[128] = “PICT1076.jpg”
// um den Kreis zu schließen sind ein zusätzliches Start- und Endbild nötig:
bild[0] = bild[128];
bild[129] = bild[1];
folder = “images/”;
var n = 128;
var i = 0;
function bilder() {
i++;
if (i>n) {i=1;}
if (i<1) {i=n;}
document.galerie1.src = folder+bild[i-1];
document.galerie2.src = folder+bild[i];
document.galerie3.src = folder+bild[i+1];
document.galerie.src = folder+bild[i];
document.getElementById(”nr”).innerHTML = “Bild ” + i + ” von ” + n;
setTimeout(”bilder()”,4000)
}
//–>
</SCRIPT>
Die Galerie startet automatisch und läuft im Kreis.
