zurück zum Inhaltsverzeichnis


Bildergalerie mit javascript


Natürlich müsste man bevor man irgendetwas macht mit javaScript sehr viel Grundsätzliches erklären. Man könnte an dieser Stelle gut und gerne ein halbes Buch schreiben über die Theorie dahinter ohne in die Praxis zu gehen.

Ich wähle nun den anderen Weg.

Ich möchte gleich mit etwas sehr praktischem anfangen,
das man auch wirklich brauchen kann.
Ich zeige einen von vielen Wegen,
wie man mit javaScript eine Bildergalerie machen kann.
Die Theorie darum herum erschliesst sich so erst nach und nach.

Ein bisschen Grundsätzliches braucht es aber trotzdem;

Ganz wichtig ist zu wissen,
dass ein Browser bevor er irgend etwas darstellt,
zuerst alles einliesst was zwischen <html> und </html> steht.

Darum muss man javaScript entweder auslösen mit einem

onload

Das geschieht dann, wenn der Browser alles eingelesen hat.
Oder man löst etwas aus mit einem Event.
Dieser wird ausgelöst mit folgenden javaScript Ereignissen;

onclick : beim klicken
ondblclick : beim doppel klicken

Dann kann javaScript ausgelöst werden mit Tasteneingaben;

onkeydown : solange eine Taste gedrückt ist
onkeypress : beim drücken einer Taste
onkeyup : bei losgelassener Taste

weiter kann über irgend einem HTML Objekt,
das kann ein div, ein Bild, ein Link oder was auch immer sein
mit folgenden Ereignissen javaScript ausgelösst werden;

onmousemove : beim bewegen der Maus
onmouseout : beim verlassen der Maus
onmouseover : beim darüber fahren der Maus
onmousedown : beim drücken der Maus
onmouseup : beim loslassen der Maus

Wir kennen ja schon ein javaScript Beispiel !
Der Zauberspruch, mit dem man diese hässlichen Rahmen um angeklickte Links wegzaubern kann;

onfocus="if(this.blur)this.blur()"


Bei Eingabefelder gibt es auch noch mögliche javascript Auslöser,
onchance oder submit
aber davon an anderer Stelle
Daneben gibt es noch andere Ereignisse oder Event-Handler;
Hier der off-line Link zu selfhtml.org
Hier der on-line Link zu selfhtml.org

javaScript kann direkt im Body geschrieben werden.
Funktionen und längere Scripts schreibt man aber eher im head.
Eine dritte Möglichkeit ist,
javascript in einer externen Datei zu schreiben
und im Head diese Datei einlesen zulassen.
Eine solche Datei endet mit .js

Dies wird vor allem dann wichtig, wenn man sogenannte javaScript Bibliotheken braucht.
Dies ist eine art Werkzeugkasten mit fix fertigen Funktionen, die dann verwendet werden können.
Eine berühmter Werkzeugkasten ist die script.aculo.us
Der Link zu script.aculo.us
Hier eine Adresse mit weiteren Bibliotheken;
www.drweb.de
Man kann sich natürlich auch selber einen individuellen Werkzeugkasten schreiben,
oder zusammentragen aus verschiedenen Bibliotheken.

Wenn javaScript im Head geschrieben wird, kommt es zwischen diese zwei Tags;

<script type="text/javascript">
Hier kommt der Script hinein....
</script>

Wenn eine externe .js Datei im Head eingelesen werden muss sieht das so aus;

<script src="Werkzeugkasten.js" type="text/javascript" > </script>


Bilderwechsel

Als erstes machen wir einen einfachen Bilderwechsel.
Wenn man mit der Maus über ein Bild fährt, wechselt das Bild.
Wenn man mit der Maus wieder aus dem Bild heraus fährt,
wechselt das Bild wieder zum ursprünglichen Bild zurück.

Schaue Dir zuerst das Resultat an;

Falls Du den Code abschreiben möchtest, was sicher der beste Lerneffekt wäre,
Kannst Du Deine Übungsdatei mit einem anderen Namen in den Ordner Unterlagen speichern.
Dann findet der Browser die Bilder.
Wenn Du on-line arbeitest sind die Bilder unter folgender absoluten Adresse;
http://www.kieselsteine.ch/Unterlagen/Bilder/Bilderneu/Mandala1.jpg
http://www.kieselsteine.ch/Unterlagen/Bilder/Bilderneu/Mandala2.jpg
u.s.w.

Hier ist der Code;

<html>
<head>
<title>Bilderwechsel</title>
<style type="text/css">
.Titel {
     color:#345376;
     font-size:24px;
}
.text{     color:#6483a6;     font-size:18px; } .rahmen {
     width:700px;
     height:500px;
     background-color:#8EAEB9;
}
</style>
<script type="text/javascript">
var bild1;
var bild2;
function vorladen()
{
     bild1 = new Image();
     bild1.src = "Bilder/Bilderneu/Mandala1.jpg";
     bild2 = new Image();
     bild2.src = "Bilder/Bilderneu/Mandala2.jpg";
}
function wechselHin()
{
     document.getElementById("bilderrahmen").src = bild2.src;
}
function wechselZurueck()
{
     document.getElementById("bilderrahmen").src = bild1.src;
}
window.onload = vorladen();
</script>
</head>
<body bgcolor="#323C4E">
<br />
<br />
<div align="center">
   <div class="rahmen"> <br />
     <br />
     <div class="Titel">Bilderwechsel</div>
       <br />
       <br />
       <img src="Bilder/Bilderneu/Mandala1.jpg"
         id="bilderrahmen"
         onmouseover="wechselHin()"
         onmouseout="wechselZurueck()" />
    </div>
<br /> <br /> <span class="text">Fahre mit der Maus über das Bild!</span> </div>
</body>
</html>



Hier nun die Erklärung was in dieser Datei passiert:

Im javaScript Teil werden zwei Variabeln iniziert bild1 und bild2

Dann werden drei Funktionen erstellt;
vorladen()
wechselHin()
wechselZurueck()

Am Schluss wird die Funktion vorladen() mit Hilfe von;
window.onload = vorladen(); gestartet

Die anderen beiden Funktionen werden erst ausgelöst,
wenn der User mit der Maus über das Bild fährt.
Oder wenn der User mit der Maus wieder aus dem Bild fährt.
Das steht im Tag <img> im body Teil.
onmouseover="wechselHin()"
onmouseout="wechselZurueck()"

im Tag <img> steht weiter;
id="bilderrahmen"
Dies gibt diesem HTML- Bild- Objekt ein einmalige ID
Mit Hilfe des javaScript Befehl getElementById
kann man dieses Bildobjekt nun ansprechen.
Da das Objekt im document ist, ist seine Ansprechadresse nun
document.getElementById("bilderrahmen")
Ein Bild hat unter anderem die Eigenschaft src
Diese Eigenschaft hat als Wert die Adresse, wo das Bild sich befindet.
Das ergibt;
document.getElementById("bilderrahmen").src = "Bilder/Bilderneu/Mandala2.jpg";
Dort steht aber;
document.getElementById("bilderrahmen").src = bild2.src; ......!..?

Der Grund dafür liegt in der Funktion vorladen(),
die ja sofort nach dem einlesen der Datei vom Browser ausgeführt wird:
bild1 = new Image();
bild1.src = "Bilder/Bilderneu/Mandala1.jpg"
Da wird zuerst eine Instanz der Image Klasse erstellt.
Die Image Klasse gehört zur Grundstruktur des javaScript, die jeder Browser schon kennt.
Dieses new Image() wird in die Variable bild1 gelegt,
die ganz am Anfang iniziert wurde.
Als nächstes wird der Eigenschaft .src der Pfad "Bilder/Bilderneu/Mandala1.jpg" eingegeben.
Das hat einerseits zur Folge, dass das Bild geladen wird.
und andererseits, dass nachher bild1.src eine art Ticket ist,
dass anstelle der Pfadangabe gebraucht werden kann.

Bei der Funktion wechselHin() wird nun das Ticket bild1.src ausgetauscht in das Ticket bild2.src
Bei der Funktion wechselZurueck() wiederum wird das Ticket bild2.src wieder zurückgetauscht in das Ticket bild1.src


Bilderwechsel über einen Link

Das Beispiel oben ist ja schon recht brauchbar.
Wenn wir aber eine Bildergalerie mit mehreren Bildern herstellen wollen,
möchten wir, dass der User sich vorwärts und zurück durch die Bilder klicken kann.
Eine Möglichkeit wäre den Bilderwechsel nicht mehr direkt durch das Bild auszulösen,
sondern über links.
Im folgenden Beispiel bleiben wir einmal bei zwei Bildern und nur einem Link.
Jedes mal wenn der User auf den Link klickt soll das Bild sich wechseln.

Schaue Dir zuerst das Resultat an;

Falls Du den Code abschreiben möchtest, was sicher der beste Lerneffekt wäre,
Kannst Du Deine Übungsdatei mit einem anderen Namen in den Ordner Unterlagen speichern.
Dann findet der Browser die Bilder.
Wenn Du on-line arbeitest sind die Bilder unter folgender absoluten Adresse;
http://www.kieselsteine.ch/Unterlagen/Bilder/Bilderneu/Mandala1.jpg
http://www.kieselsteine.ch/Unterlagen/Bilder/Bilderneu/Mandala2.jpg
u.s.w.

Hier ist der Code;


<html>
<head>
<title>Bilderwechsel mit Link</title>
<style type="text/css">
img{
    border-style:solid;
    border-color:#B3C0C1;
    border-width:2px;
}
a {
    font-size:22px;
}
a:hover {
    font-size:20px;
}
.Titel {
    color:#143356;
    font-size:24px;
}
.rahmen {
    width:700px;
    height:500px;
    background-color:#E2D1BA;
}
</style>
<script type="text/javascript">
var bild1;
var bild2;
function vorladen() {
    bild1 = new Image();
    bild1.src = "Bilder/Bilderneu/Mandala3.jpg";
    bild2 = new Image();
    bild2.src = "Bilder/Bilderneu/Mandala4.jpg";
}
function wechsel(){
    if(document.getElementById("bilderrahmen").src == bild1.src){
        document.getElementById("bilderrahmen").src = bild2.src;
    }
     else if(document.getElementById("bilderrahmen").src == bild2.src){
        document.getElementById("bilderrahmen").src = bild1.src;
    }
}
window.onload = vorladen();
</script>
</head>
<body bgcolor="#38352E">
<br />
<br />
<div align="center">
  <div class="rahmen"> <br />
    <br />
    <div class="Titel">Bilderwechsel mit Link</div>
    <br />
    <br />
    <img src="Bilder/Bilderneu/Mandala3.jpg" id="bilderrahmen" /><br />
    <br />
    <a href="#" onclick="wechsel()" onfocus="if(this.blur)this.blur()">wechseln</a> </div>
</div>
</body>
</html>



Was geschieht hier anders als in dem erste Beipiel ?

Es werden auch wieder die Bilder vorgeladen und ein Ticket für ihre Adresse ausgestellt.
Dann hat es aber nur noch eine zusätzliche Funktion.
Wir haben ja auch nur einen Link auf dem mit onklick die Funktion wechsel() aufgerufen wird.
Der Link selber hat als Adresse zuhause bleiben, sprich nirgendswo hin zu gehen. einen Gartenhaag.

In der Funktion wechsel() wird mit hilfe einer if Abfrage gefragt.
ob
document.getElementById("bilderrahmen").src gleich gleich ist mit dem Ticket bild1.src
Beachte das ==
In Scriptsprachen heisst gleich meist nicht gleich, sondern ist eine Abfüllstation.
Es wird immer die rechte Seite von einem gleich in die Linke Seite gefüllt, die eine Variabel sein muss.
Gleich heisst in Scriptsprachen meist gleich gleich !
Wenn dies der Fall ist, dann soll er das Ticket austauschen in bild2.src
Falls aber (else if)
document.getElementById("bilderrahmen").src gleich gleich ist mit dem Ticket bild2.src
Soll er das Ticket zurück tauschen in bild1.src


Die Bildergalerie


Nun haben wir schon fast das nötige Werkzeug eine richtige Bildergalerie zu erstellen
mit vorwärts und rückwärts Knopf, sprich Link

Hier nun eine einfache javaScript Bildergalerie

Schaue Dir zuerst das Resultat an;


Dies ist der Code; Falls Du den Code abschreiben möchtest, was sicher der beste Lerneffekt wäre,
Kannst Du Deine Übungsdatei mit einem anderen Namen in den Ordner Unterlagen speichern.
Dann findet der Browser die Bilder.
Wenn Du on-line arbeitest sind die Bilder unter folgender absoluten Adresse;
http://www.kieselsteine.ch/Unterlagen/Bilder/Bilderneu/Mandala1.jpg
http://www.kieselsteine.ch/Unterlagen/Bilder/Bilderneu/Mandala2.jpg
u.s.w.


<html>
<head>
<title>Bildergalerie</title>
<style type="text/css">
img {
    border-style:solid;
    border-color:#B3C0C1;
    border-width:2px;
}
a {
    font-size:22px;
    text-decoration:none;
    color:#414BA7;
}
a:hover {
    color:#89C0C0
}
.Titel {
    color:#143356;
    font-size:24px;
}
.rahmen {
    width:700px;
    height:500px;
    background-color:#E4DFD6;
}
#zaehler {
    font-size:24px;
    color:#62508F;
}
</style>
<script type="text/javascript">
var zahl=1;
var don =""
function vor(){
    zahl++;
        if(zahl>17){
        zahl=1;
    }
    document.getElementById("Galerie").src= "Bilder/Bilderneu/Mandala"+zahl+".jpg";
    document.getElementById("zaehler").innerHTML = "" +zahl;
}
function zurueck(){
    zahl--;
        if(zahl<1){
        zahl=17;
    }
    document.getElementById("zaehler").innerHTML = "" +zahl;
    document.getElementById("Galerie").src= "Bilder/Bilderneu/Mandala"+zahl+".jpg";
}
</script>
</head>
<body bgcolor="#E2D1BA">
<br />
<div align="center">
  <div class="rahmen">
  <br />
    <br />
    <img src="Bilder/Bilderneu/mandala1.jpg" id="Galerie" /> <br />
    <br />
    <a href="#" onclick="vor()" onfocus="if(this.blur)this.blur()"> vorwärts </a>
      <span id="zaehler">1</span>  
    <a href="#" onclick="zurueck()" onfocus="if(this.blur)this.blur()"> zurück </a>
</div>
</div>
</body>
</html>



Hier nun die Erklärung von der Datei oben

Bei diesem Beispiel habe ich die Funktion Vorladen weggelassen.
So wird jedes Bild erst dann geladen, wenn es aufgerufen wird.
zuerst werden zwei Variabeln iniziert.
In die Variabel zahl kommt die Bildzahl. Anfangs ist das 1.
In die Variabel don kommt ein String. Ein String ist eine Kette von Buchstaben.
Sie wird die Bildzahl als String in die div ID zaehler hinein schreiben.
Diese div ID zaehler ist im Body zwischen den beiden Links.
Da kein Umbruch dazwischen ist,
kommt alles auf eine Zeile neben einander.

In der Funktion vor() steht als erstes;
zahl++;
Das ist eine Kurzschreibweise von;
zahl = zahl + 1;
und zählt nun bei jedem Aufruf 1 zur schon vorhandenen zahl dazu.

Dann kommt eine if Abfrage;
Wenn die zahl grösser ist als 17, soll die Zahl wieder 1 werden.
17 weil es 17 Bilder hat, die gezeigt werden sollen.
würde die Zahl 18 käme eine Fehlermeldung,
weil es das Mandala18.jpg Bild gar nicht gibt in dem Ordner.

Auf der nächsten Zeile wird dem Bild mit der ID Galerie
die Eigenschaft src gefüllt mit dem erwarteten Wert.
Der erwartete Wert ist eine Pfadangabe als String.
Alles was zwischen den Anführungszeichen steht wird als String interpretiert.
Dies ist nun aber ein zusammengesetzter String !
Der erste Teil ist;
"Bilder/Bilderneu/Mandala"
Dann wird mit + der Inhalt der Variabel zahl dazu angehängt.
Mit einem weiteren + wird noch der Rest dazugehängt;
".jpg"
Das ganze gibt dann einen einzigen String;
zum Beispiel;
Bilder/Bilderneu/Mandala7.jpg
Das ist genau ein erwartete Wert, der von der Eigenschaft src erwartet wird.

In der letzten Zeile dieser Funktion wird der ID zaehler neu gefüllt
mit dem erwarteten Wert der Eigenschaft innerHTML.
innerHTML erwartet einen String.
Es braucht also etwas, was zwischen zwei Anführungszeichen steht.
Auch wenn es nichts ist.
Durch dieses Nichts zwischen den zwei Anführungszeichen wird es zum String.
An einen String kann man mit dem + Zeichen noch etwas anhängen.
Auch wenn der Inhalt der Variable Zahl eine Zahl ist und kein String,
wird das ganze als String angehängt,
weil durch das Nichts zwischen den zwei Anführungszeichen am Anfang,
es schon ein String geworden war.
Klingt etwas ungewohnt, für jemand der so etwas zum ersten mal sieht.
Man gewöhnt sich aber daran.

Nun noch zum Ablauf;
Wieso steht das zahl++; am Anfang und nicht irgendwo dazwischen oder am Schluss?
Würde es am Schluss stehen und die Variable Zahl kommt schon mit dem Wert 1
Würde beim ersten Klick auf den Link nichts passieren.
Weil ja schon beim Aufrufen der Seite das Bild mit dem Sufix 1 dasteht.
Es würde ein zweites mal das gleiche Bild aufgerufen.
Im vorwärts Link im body wird diese nun besprochene Funktion vor() aufgerufen.

Im zurück Link wird hingegen die andere Funktion zurueck() aufgerufen.
zwei Sachen sind in ihr anders.
Erstens steht auf der ersten Zeile;
zahl--;
Das ist die Kurzschreibweise von
zahl = zahl-1;
und zieht nun bei jedem Aufruf von der Variabel zahl 1 ab.

In der if Abfrage kommt das Problem natürlich auch gerade anders herum wie in der Funktion vor()
Wenn die Zahl kleiner ist als 1 soll sie 17 werden.
Auch in dieser Funktion wird wie oben beschrieben der String in dem div mit der ID zaehler neu gefüllt.

In diese Galerie könnten nun auch Bilder mit verschiedenen Höhen und Breiten angezeigt werden.
Die Navigation ist immer mit einem <br /> getrennt unter dem Bild.
Käme das Bild weiter nach unten weil seine Höhe grösser ist,
würde auch die Navigation mit nach unten rutschen.
Das geht aber nur, weil im <img /> Tag im Body kein Wert der Höhe und Breite mitgegeben wurde.
Weil der Browser nicht weiss, wie gross das Bild dargestellt werden soll,
nimmt er die Höhe und Breite des neu geladenen Bildes.
Umso besser !
Cool nicht?
Nun kannst Du schon selber eine Bildergalerie mit javaScript coden!