Homepagebau
Dateiversion:
diesen Beitrag diskutieren,
ergänzen, eine Frage stellen
Menü einblenden
 

JavaScript Galerie

Schwierigkeit: für Anfänger

 

Beispiel für eine Bildergalerie mit Slideshow:


Beschreibung:

Sie kennen das Problem: viele (große) Bilder auf der Homepage ablegen. Das sieht unprofessionell aus, die Seite lädt ewig und eigentlich wünscht man sich eine elegante Lösung - ohne viel Aufwand.


Quelltext:

<center>

Wir gruppieren alle wichtigen Elemente mit einem Formulartag. Die ID benötigen wir für die Adressierung in JavaScript.

<form name="form" id="form">

<p>

Schaltflächen für "vor" und "zurück" + "Slideshow"

<input id="zurueck" type="button" value="&lt;"
 onClick="clearTimeout(timer); if (i>0) { LoadPic(--i) };">
<input id="Slideshow" type="button" value="Slideshow"
 onClick="i=0; SlideShow(i);">
<input id="vor" type="button" value="&gt;"
 onClick="clearTimeout(timer);
          if (i<pictures.length-1) { LoadPic(++i) };">

<p>

Das Corpus delicti: die Platzhalter für das Bild und die Bildunterschrift

<img id="image" src=""><br>
<input id="text" type="text" size="40"
 style="background-color: #FFFFFF; text-align: center;
 border-style: solid; border-width: 0" readonly>

</form>

</center>


<script language="JavaScript">
<!--

Wir legen 2 leere Arrays an ...

names = new Array();
pictures = new Array();

... und speichern darin alle Daten zu unseren Bildern

names[0] = "Bildunterschrift 1";
pictures[0] = "Bild-URL 1";

names[1] = "Bildunterschrift 2";
pictures[1] = "Bild-URL 2";

...

(Hilfsvariablen; i = Nummer des gerade geladenen Bildes)

var i = 0;
var timer;

Wir beschreiben nun eine Funktion, die das Bild mit der Nummer "a" lädt

function LoadPic(a) {

Ein schönes Beispiel für eine Zuweisung in JavaScript.
Wie sie sehen, ist die Adressierung der HTML-Objekte in JavaScript hierarchisch.
"document" steht für den "Body". "form" ist die ID unseres Formulars (siehe oben).
Danach stehen die IDs (die Namen) der Objekte.
document.images['image'].src = pictures[a];
document.form.text.value = names[a];
};

Bleibt noch die Slideshow. Eigentlich genau die Funktion "LoadPic", die wir zeitverzögert immer wieder aufrufen wollen.

function SlideShow(a) {

LoadPic(a);
if (i<pictures.length-1) {

Die Funktion "setTimeout()" wird sie in JavaScript auf Schritt und Tritt verfolgen.
Syntax: ID-Wert = setTimeout("auszuführende JavaScriptbefehle", "Zeitverzögerung in Millisekunden")
 
Beachten sie, dass sie mit der Funktion "clearTimeout()" die Ausführung vorzeitig abbrechen können.
Syntax: clearTimeout(ID-Wert)

timer = setTimeout("SlideShow(++i);", 3000); };

};

"Autostart" - das erste Bild soll geladen werden.

LoadPic(0);

//-->
</script>

Skript ausprobieren:

Porbleme mit dem Skript? Kein Problem! Daten eingeben, Knopf drücken und dein Skript wird automatisch für dich erstellt. Und: du kannst es gleich ausprobieren.

Galerie / Slideshow erstellen

URLs der Bilder
Bildunterschriften
 
Beispiel:
(so sollten die Einstellungen aussehen)
URLs
Titel

Quellcode: