Bei dieser Bildergalerie werden die Bilder in einer Bilderleiste dargestellt.
Ein Klick auf ein Bild zeigt dies vergrößert an.
Eine Alternative wird in der Drag and Drop API beschrieben.
Hier kann das Bild in das Anzeigefenster gezogen werden.
Die Dateinamen der Bilder werden mit Ajax aus einer XML-Datei gelesen. Dies könnte auch aus einem PHP-Script sein,
dass aktuell immer den Inhalt des DVZ ausgibt.
Die Dateinamen werden in einem Array gespeichert. Dieses Array ist hier als globale Variable definiert,
damit alle Funktionen darauf zugreifen können.
Bilder anzeigen
Mit dem Button Bilder anzeigen wird die Funktion bildLeiste aufgerufen.
Diese Funktion ruft zuerst die Funktionen bildListeLesen und bildListeArray zum Einlesen der
Bilderliste in das Array auf.
Dann wird mit der Funktion bildLeisteAnzeigen die Liste der Bilder erzeugt und angezeigt.
Für jedes Bild wird ein Eventlistener installiert, der beim Klick auf das Bild die Funktion bildLeisteGross aufruft.
Die Funktion bildLeisteGross zeigt das angeklickte Bild im großen div an.
Die Pfeile rufen die Funktion bildLeisteLinks bzw. bildLeisteRechts auf.
Diese Funktionen verschieben das Array in die entsprechnden Richtung und zeigen mit
der Funktion bildLeisteAnzeigen die Bildleiste erneut an.
bildLeiste()
bildListeLesen()
bildListeArray()
bildLeisteGross()
bildLeisteLinks()
bildLeisteRechts()
CSS anzeigen
Bei dieser Bildergalerie werden die Bilder nur mit CSS3 gesteuert. Ein Klick auf ein Bild zeigt dies vergrößert an.
Die Dateinamen der Bilder werden mit Ajax aus einer XML-Datei gelesen. Dies könnte auch aus einem PHP-Script sein,
dass aktuell immer den Inhalt des DVZ ausgibt.
Die Dateinamen werden in einem Array gespeichert. Dieses Array ist hier als globale Variable definiert,
damit alle Funktionen darauf zugreifen können.
Bilder anzeigen
Mit dem Button Bilder anzeigen wird die Funktion bildCSS aufgerufen.
Diese Funktion ruft zuerst die Funktionen bildListeLesen und bildListeArray zum Einlesen der
Bilderliste in das Array auf.
Mit der Funktion bildLeisteAnzeigenCSS werden die Bilder aus dem Array in einem div angezeigt.
Die Anzeige und der Effekt für die Anzeige wird mit einer Transition in CSS gesteuert.
Mit der Pseudoklasse target kann auf ein Klick reagiert werden.
Dazu mus ein interner Link mit einer ID vorhanden sein.
Dumm ist, dass der Browser einen internen Link an den Anfang des Fensters positioniert.
Durch die Pseudoklasse target wird bei einem Klick die Aktion ausgelöst.
Hier wird das Bild gedreht, vergrößert und verschoben. Zu beachten ist, dass durch Scale auch die Pixelangaben
beim Border oder beim verschieben vergrößert werden.
bildCSS()
bildListeLesen()
bildListeArray()
bildLeisteAnzeigenCSS()
CSS anzeigen
Hier werden zwei Bilder in einer Endlosschleife übereinandergeblendet.
Bilder anzeigen
Mit dem Button Bilder anzeigen wird die Funktion bildUeber aufgerufen.
Die Funktion erstellt die beiden Bilder.
Dabei ist zu beachten, dass das div in CSS mit position: relative
definiert wird: Das Bild, dass eingeblendet wird bekommt die ID bildUeber2 und muss in CSS mit
position: absolute definiert sein.
Sind die Bilder erstellt, wird die Funktion ueberblenden aufgerufen. Diese Funktion blendet das untere Bild über das obere.
Ist die Blende abgeschlossen wird v_offset umgekehrt und das obere Bild wieder ausgeblendet.
bildUeber()
ueberblenden()
CSS anzeigen
Bei dieser Bildergalerie werden die Bilder in einer Endlosschleife übereinandergeblendet.
Die Dateinamen der Bilder werden mit Ajax aus einer XML-Datei gelesen. Dies könnte auch aus einem PHP-Script sein,
dass aktuell immer den Inhalt des DVZ ausgibt.
Die Dateinamen werden in einem Array gespeichert. Dieses Array ist hier als globale Variable definiert,
damit alle Funktionen darauf zugreifen können.
Ist das Array abgearbeitet, beginnt es wieder von vorne.
Bilder anzeigen
Mit dem Button Bilder anzeigen wird die Funktion bildUeberAlle aufgerufen.
Diese Funktion ruft zuerst die Funktionen bildListeLesen und bildListeArray zum Einlesen der
Bilderliste in das Array auf.
Danach werden die beiden Bilder erzeugt. dabei ist zu beachten, dass das div in CSS mit position: relative
definiert wird: Das Bild, dass eingeblendet wird bekommt die ID bildUeberAlleUnten und muss in CSS mit
position: absolute definiert sein.
Sind die Bilder erstellt, wird die Funktion ueberblendenAlle aufgerufen. Diese Funktion blendet das untere Bild über das obere.
Ist die Blende abgeschlossen wird das untere Bild als oberes Bild gesetzt, das nächste Bild aus dem Array gelesen und als unteres Bild gesetzt.
bildUeberAlle()
bildListeLesen()
bildListeArray()
ueberblendenAlle()
CSS anzeigen
