Die Dateien galery.xslt
(Text), galery.css
(Quelltext) und galery.js
bestimmen die "Galerie-Darstellung" einer Bildergeschichte der Website kleider.herbaer.de
.
Die Javascript-Datei galery.js
passt das Layout an die Fenstergröße an, verwaltet das "aktuelle Bild" und definiert hilfreiche Tastenkürzel. Sie setzt voraus, dass die Javascript-Datei common.js
(Quelltext) geladen ist.
varcur_imglink
; // aktueller Bildverweis varpopup_help
; // Popup "Tastenhelfer" varpopup_about
; // Popup "Über ..." varmin_width
; // Anfängliche Breite des Body-Elements ist die Mindestbreite varmin_height
; // Anfängliche Höhe des Body-Elements ist die Mindesthöhe vartitle_height
; // Anfängliche Höhe der Titelleiste varstyle_body
; // "Style" der Gesamt-Seite varstyle_title
; // "Style" der Titelleiste varstyle_galery
; // "Style" der "Galerie" (Bilder-Feld)on_mouseover
(event)on_focus
(event)onKeydown
(event)initialize_galery
()onResize
(event)
cur_imglink
Wenn ein Bildverweis (a
-Element) fokussiert wird, wird er zum neuen aktuelle Bildverweis (cur_imglink
, on_focus
). Ein Bildverweis kann mit den Standard-Methoden des Browsers fokussiert werden. Es wird aber auch fokussiert, wenn der Mauszeiger auf einen Bildverweis läuft.
Die Tasten S, N und K bestimmen aus dem aktiven Bildverweis das Verweisziel.
popup_help
Ein Popup-Fenster ("Tastatur-Steuerung", Kennung help
) mit einer Zusammenstellung der Tasten-Funktionen. Es wird mit der Taste H geöffnet und geschlossen.
popup_about
Ein Popup-Fenster ("Info-Fenster", Kennung about
) mit Angaben zu den Mitwirkenden der Website. Es wird mit der Taste I geöffnet und geschlossen. Auch ein Klick auf das Logo öffnet das "Info-Fenster".
min_width
Die Mindestbreite des body
-Elements in Pixeln. Der Wert ist der anfängliche Wert gemäß den CSS-Regeln (galery.css
(Quelltext)). min_width
wird in der Funktion onResize
benutzt.
min_height
Die Mindesthöhe des body
-Elements in Pixeln. Der Wert ist der anfängliche Wert gemäß den CSS-Regeln (galery.css
(Quelltext)). min_height
wird in der Funktion onResize
benutzt.
title_height
Die Höhe der Titel-Leiste (div
-Element, ID div_title
) in Pixeln. Der Wert ist durch CSS-Regeln (galery.css
(Quelltext)) bestimmt. title_height
wird in der Funktion onResize
benutzt.
style_body
Das style
-Objekt des body
-Elements. Es wird in der Funktion onResize
benutzt.
style_title
Das style
-Objekt der Titel-Leiste (div
-Element, ID div_title
). Es wird in der Funktion onResize
benutzt.
style_galery
Das style
-Objekt des Bilder-Feldes (div
-Element, ID div_galery
). Es wird in der Funktion onResize
benutzt.
on_mouseover
Dieser Ereignisbehandler wird aufgerufen, wenn der Mauszeiger auf einen Bildverweis (a
-Element) läuft. Das a
-Element wird fokussiert. Dadurch wird der Ereignisbehandler on_focus
aufgerufen.
on_focus
onResize
onKeydown
Die Funktion onKeydown
behandelt das Niederdrücken (keydown
) einiger Tasten oder einen Klick auf ein span
-Element im Fenster "Befehle". (popup_help
)
Wenn eine Zusatztaste (Cntrl, Shift, Meta, Alt) gedrückt ist, macht die Funktion nichts. Die folgenden Tasten werden behandelt:
Wenn es einen aktuellen Bildverweis (cur_imglink
) gibt, wird das kleine Bild zum aktuellen Bildverweis angezeigt.
Wenn es ein aktuellen Bildverweis (cur_imglink
) gibt, wird das Bild zum aktuellen Bildverweis in normaler Größe angezeigt.
Die Taste T wechselt im aktuellen Browser-Fenster zur Bildergeschichte in normaler Ansicht. Wenn es einen aktuellen Bildverweis (cur_imglink
) gibt, werden das zugehörige Bild im zugehörigen Abschnitt der Bildergeschichte angezeigt.
Die Taste X wechselt im aktuellen Browser-Fenster zur Hilfe zur Galerie-Ansicht.
öffnet und schließt das "Info-Fenster" (popup_about
öffnet und schließt das Fenster "Tastatur-Steuerung" (popup_help
wechselt im aktuellen Browser-Fenster zur Bilderschau der Bildergeschichte mit zufälliger Bildauswahl in der Ansicht ohne Rahmenelemente. (story.xml#rndimgshow
)
Schließt die geöffneten Popup-Fenster ("Info-Fenster" popup_about
und "Tastatur-Steuerung" popup_help
).
initialize_galery
Die Funktion initialize_galery
erzeugt die Javascript-Objekte popup_help
und popup_about
, initialisiert die Variablen mit Ausnahme der Darstellungsmaße min_width
, min_height
und title_height
und ordnet die Ereignisbehandler (on_mouseover
, on_focus
, onKeydown
und onResize
) zu. Zur Anpassung an die Fenstergröße ruft sie onResize
auf.