galery.xslt
Galerieansicht einer Bildergeschichte
2013-06-29
Herbert
Schiemann
h.schiemann@herbaer.de
Dieses Stylesheet stellt eine Bildergeschichte (story.xml)
als „Bildergalerie” dar.
Es bindet die Dateien
galery.js und galery.css ein.
Es wird vom „Stub” galery.stub eingebunden.
Die Darstellung ist für einen Desktop-Computer gedacht.
Unter der Überschrift erscheint ein Feld mit allen Vorschaubildern der Bildergeschichte.
Die Surferin zeigt mit dem Mauszeiger auf ein Vorschaubild.
Ein Mausklick öffnet die Default-Darstellung der Bildergeschichte,
zwei Tasten öffnen das Bild im normalen oder im kleinen Format.
ID-Attribute
Die Darstellung verwendet die folgenden ID-Werte:
div_title
Die Titelleiste mit dem Logo (ID div_logo) links
und der Überschrift (ID div_head) rechts.
div_logo
Das "Logo" links in der Titelleiste
div_head
Die Überschrift: ein div-Element,
das das h1-Element enthält.
Die Verschachtelung erleichtert es, CSS-Regeln anzuwenden.
div_galery
Das Feld der Vorschaubilder
about_frame
Das Aufklappfenster "Über ..."
help_frame
Das Aufklappfenster "Befehle"
btn_help
Das "Hilfe-Fragezeichen"
<tag class="attribute">class</tag>-Attribute
In class-Attributen werden die folgenden
Wörter benutzt:
popup
kennzeichnet die beiden Aufklapp-Fenster "Über ..." und "Befehle".
popinact / popact
Das Wort popinact kennzeichnet ein inaktives
Aufklapp-Element, hier ein verborgenes Aufklappfenster.
Das Wort popact kennzeichnet ein aktives
Aufklapp-Element, hier ein sichtbares Aufklappfenster.
close
Knopf zum Schließen eines Aufklappfensters
inline
Block-Elemente, die als "Inline-Block" dargestellt werden sollen:
hier die Felder für die Vorschaubilder.
normal / current
Der Wert current bezeichnet den aktuellen Bildverweis
(a-Element),
der Wert normal alle anderen Bildverweise.
Diese Werte werden durch Javascript umgeschaltet.
Präfix des Pfades von JavaScript- und CSS-Dateien
Sprache
de
HTML-Rahmen
Außer dem Bilder-Feld enthält der Rumpf
die Abschnitte "Über ..." und "Befehle".
Diese Abschnitte werden als Aufklapp-Fenster durch Javascript gesteuert.
<l:ph id="galery_title_prf"/>
<xsl:apply-templates select="is:title"/>
icon
stylesheet
var langsfx = ".";
onload = function () { initialize_galery (); };
?
Die Nummer des Abschnitts wird als Parameter übergeben
Vorlage für ein Bild