pinwand.xslt Pinwand-Darstellung einer "Bildergeschichte" 2020-06-19 Herbert Schiemann h.schiemann@herbaer.de
Aufbau Der Kopf der Darstellung bleibt immer gleich. Der Bereich unterhalb der Kopfleiste (ID c_cont) ist ein Platz für austauschbare Tafeln. Es wird immer nur eine Tafel angezeigt. Manche Tafeln kann man sich als Pinwand vorstellen, auf der mehrere Textzettel und Bilder mehr oder weniger durcheinander angeheftet sind. Die erste Tafel (Starttafel, ID c_main) ist eine Pinwand. Der oberste, anfangs immer frei sichtbare Zettel enthält den Text des ersten Abschnitts. Weitere Zettel enthalten Abschnittsüberschriften als Verweise auf die Abschnitte und den Verweis "zurück". Außerdem ist das erste Bild jedes Abschnitts angeheftet. Nachfolgend wird für jeden Abschnitt eine Tafel angelegt. Wenn der Abschnitt kein Bild enhält, dann enthält das Tafelbild den Abschnittstext, gefolgt von kleinen Vorschaubildern, die als Verweis auf einen Abschnitt dienen. Wenn der Abschnitt wenigstens ein Bild enthält, ist die Tafel eine Pinwand. Die Pinwand enthält einen Zettel für jeden Unterabschnitt und alle Bilder. Außerdem gibt es einen Zettel mit den Überschriften anderer Abschnitte als Verweisen und ein Bild eines anderen Abschnitts ebenfalls als Verweis Die "fremden" Abschnitte werden beim Laden pseudozufällig gewählt. Die letzte Tafel ist, bildlich gesprochen, die Leinwand für die Diaschau. Links unten wird ein Hinweis auf die maschinelle Übersetzung (ID mt) angezeigt, den die Surferin verbergen kann.
Bilder Die img-Elemente haben zunächst kein src-Attribut. Die Bilddaten sollen verzögert bei Bedarf geladen werden, damit es nicht zu langen Wartezeiten kommt. Stattdessen haben sie ein Attribut x-id, dessen Wert die Bildkennung ist. Es gibt die folgenden img-Elemente: Diaschau-Bild Das Bild der Diaschau mit der ID ds_img. Bilder in der Übersicht An der Übersichts-Pinwand hängt das erste Bild eines jeden Bild-Abschnitts. Gewöhnliche Bilder Gewöhnliche Bilder eines Bild-Abschnitts hängen an der Pinwand des Abschnitts. Fremdbilder Falls es genug Bildabschnitte gibt, hängt an der Pinwand eines Bildabschnitts das erste Bild eines anderen Abschnitts, das „Fremdbild”. Daumenbildchen Am Ende eines Abschnitts, der nur Text enthältt, wird ein Block mit kleinen „Daumenbildchen” angefügt, die die ersten Bilder jedes Bildabschnitts zeigen.
Verwendete ID-Werte head Die Kopfzeile logo Das Logo-Bildchen in der Kopfzeile mt Der Hinweis auf die maschinelle Übersetzung hmt Die Schaltfläche: Übersetzungshinweis verbergen d_cont Das div-Element, das alle "pinw"-Elemente (d_main und ein Element zu jedem Abschnitt) enthält. d_main Das umfassende div-Element im body-Element, das Verweise auf die Abschnitte enthält. Diese Verweise können Bilder, Textinhalte oder die Titel der Abschnitte sein. d_SECTNR Das darstellende div-Element zum Abschnitt SECTNR, ein Kindelement des div-Elements d_cont d_vw Das div-Element zur Diaschau. Es enthält zwei überlagernde div-Elemente zur Bild-Darstellung (class img) und zur Darstellung der Steuerungs-Elemente (ID d_vw_ctrl). ds_img Das Bildelement zur Diaschau. d_vw_ctrl Das div-Element mit dieser ID enthält die Elemente zur Steuerung der „Diaschau”. Es dient zur Positionierung. d_links Das Verweis-Feld, das die Schaltfläche in der Kopfzeile öffnet. d_hint Das Hinweis-Feld, das bei einem „Like” ohne Namen angezeigt wird. Verwendete <literal>class</literal>-Wörter spacer Der Leerraum in der Kopfzeile rechts neben dem Titel pinw Kennzeichnet ein div-Element ("Pinwand"), dessen Kindelemente als "Pinwandzettel" dargestellt werden. Die Reihenfolge und Positionierung der Kindelemente ist pseudo-zufällig. Diese div-Elemente sind Kinder des Behälters d_cont. fc Kennzeichnet als "Pinwandzettel" dargestellte Kindelemente eines div-Elements mit dem class-Wort pinw. show Einige Elemente werden script-gesteuert angezeigt oder verborgen. Dieses Wort zeigt an, dass das Element angezeigt wird. hide Einige Elemente werden script-gesteuert angezeigt oder verborgen. Dieses Wort zeigt an, dass das Element verborgen wird. h Kennzeichnet ein Bild im Hochformat (Porträt). Das Wort wird vom Attributwert jpg/@fmt übernommen. q Kennzeichnet ein Bild im Querformat (Landschaft) Das Wort wird vom Attributwert jpg/@fmt übernommen. dias Kennzeichnet den Abschnitt (div-Element), der die Diaschau umfasst. img Kennzeichnet das div-Element, in dem das Bild der Diaschau enthalten ist (ein Kindelement des div-Elements class~="dias"). sym Kennzeichnet den Listeneintrag mit Verweissymbolen am Ende eines Verweis-Pinwandzettels. snim Kennzeichnet die Tafel zu einem Textabschnitt. thdiv Wenn ein Abschnitt keine Bilder enthält, dann wird aus jedem Abschnitt das erste Bild zur Vorschau ausgewählt. In die Darstellung des Abschnitts ohne Bilder wird ein div-Element mit den Vorschaubildern eingefügt. Dieses Wort kennzeichnet den eingefügten Abschnitt. thb Ein Vorschaubild in einem thdiv-Block. Es enthält ein Attribut X-l mit einem Wert der Form SECTNR, das auf den Abschnitt verweist, zu dem das Bild gehört. rnd Kennzeichnet die Elemente in der Darstellung eines Bilderabschnitts, die auf pseudo-zufällig ausgewählte andere Abschnitte verweisen. fit Kennzeichnet ein Bild, das in das umgebende Feld einzupassen ist (object-fit: contain), verwendet für das Diaschau-Bild ID ds_img. shrink Kennzeichnet ein Bild, das auf das umgebende Feld zu verkleinern ist (object-fit: scale-down), zu verwenden für das Diaschau-Bild ID ds_img. clear Für die Diaschau (ID d_vw): transparenter Hintergrund grey Für die Diaschau (ID d_vw): grauer Hintergrund black Für die Diaschau (ID d_vw): weiße Schrift auf schwarzem Hintergrund Attribut <literal>x-l</literal> top Verweis auf das erste Tafelbild der Bildergeschichte like „Like” share Gefällt-mir-E-Mail help Hilfemodus umschalten links Schaltfläche „Verweise” rechts in der Kopfzeile imgfit Ändert die Anpassung der Bildgröße an den Rahmen. imgonly Wechselt in die Nur-Bild-Darstellung und zurück. backgr Ändert die Hintergrundfarbe. store Speichert die aktuellen Einstellungen lokal. prev Ein Verweis zurück zum zuvor angezeigten Tafelbild. previmg Zeigt das vorhergende Bild in der Bildlauf-Reihenfolge an. next Zeigt das nächste Bild in der Bildlauf-Reihenfolge an. Dieser und die folgenden Werte gelten nur in der „Diaschau”. startstop Startet und beendet den automatischen Bildlauf. fast Erhöht die Bildlauf-Geschwindigkeit. slow Vermindert die Bildlauf-Geschwindigkeit. img Ein Verweis zur Diaschau mit den ersten Bildern aller Abschnitte. Das anfangs angezeigte Bild wird pseudozufällig gewählt. back Ein Verweis zurück zum Tafelbild, von dem das aktuell angezeigte Tafelbild aufgerufen wurde. SECTNR Ein Verweis auf den Abschnitt Nr SECTNR. iIMGSNR_IMGIX Verweis zu Bilderschau. IMGSNR ist der Index eines Bilderabschnitts, der erste Bilderabschnitt hat die Nummer 0. IMGIX ist der Index eines Bildes im Abschnitt, die Zählung beginnt mit 0. Attribut <literal>x-h</literal> title Der Titel likebtn Der Like-Knopf an der linken Seite der Diaschau oder in der Kopfzeile sharebtn Der Share-Knopf in der Kopfzeile linksbtn Der Knopf zur Verweisliste rechts in der Kopfzeile imgfitbtn Der Knopf "Bilddarstellung anpassen" an der linken Seite der Diaschau. hideheadbtn Der Knopf "Kopfzeile verbergen" an der linken Seite der Diaschau. backgrbtn Der Knopf "Hintergrund" an der linken Seite der Diaschau. storebtn Der Knopf "Einstellung speichern" an der linken Seite der Diaschau. ds_closebtn Der Knopf "Bilderschau schließen" an der rechten Seite der Diaschau. ds_previmg Der Knopf "voriges Bild" an der rechten Seite der Diaschau. ds_next Der Knopf "nächstes Bild" an der rechten Seite der Diaschau. ds_ss Der Knopf "Start / Stop" an der rechten Seite der Diaschau. ds_fast Der Knopf "schneller" an der rechten Seite der Diaschau. ds_slow Der Knopf "langsamer" an der rechten Seite der Diaschau. ds_top Der Knopf "Übersicht" an der rechten Seite der Diaschau. ixlinks Ein Pinwandzettel auf der Übersichtstafel mit Verweisen zu den Abschnitten, aber nicht der letzte. ixlinkslast Der letzte Pinwandzettel auf der Übersichtstafel mit Verweisen zu den Abschnitten. prev Schaltfläche „zurück zur vorher angezeigten Ansicht” am Ende eines Verweis-Pinwandzettels. iximgvw Schaltfläche „zur Bilder-Übersicht” am Ende des letzten Verweis-Pinwandzettels auf der Übersichtstafel. ixback Schaltfläche „zur aufrufenden Ansicht” am Ende des letzten Verweis-Pinwandzettels auf der Übersichtstafel. m_snim Pinwandzettel zu einem Textabschnitt auf der Übersichtstafel. m_il Ein Bild auf der Übersichtstafel. fimg Das Fremdbild in einer Bildabschnitt-Pinwand rndlist Die Verweisliste in einer Bildabschnitt-Pinwand back Schaltfläche „zur aufrufenden Ansicht” am Ende des Verweis-Pinwandzettels auf einer Bildertafel. top Schaltfläche „zur Übersicht” am Ende des Verweis-Pinwandzettels auf einer Bildertafel. pimg Ein Pinwand-Bild eines Bilderabschnitts. linksect Verweis auf einen Abschnitt im Text.
Präfix des Pfades von JavaScript- und CSS-Dateien Präfix des Pfades von Bild-Dateien Maximale Zahl der Einträge in einem Verweisabschnitt Mindestzahl der Abschnitte. Wenn die Zahl der Abschnitte kleiner ist, wird kein Verweisfeld erzeugt. Wurzelelement der Bildergeschichte Sprache ohne weitere Spezifikation de Anzahl der Abschnitte Anzahl der Abschnitte mit wenigstens einem Bild HTML-Rahmen stylesheet icon var n_imgsect = ; var n_sect = ; var init_d = [ ], ", null, null], ]; var prf_img = " "; var tell = {}; tell.s = " "; tell.b = " "; onload = function() { initialize (); }; onload = function () { initialize (); }
Das div-Element unterhalb des Kopfes dient zu Positionierung. Ohne diesen Behälter müssten alle "Pinwände" einzeln positioniert werden. Es werden "Indexabschnitte" mit je höchstens maxnum_li Listeneinträgen erzeugt. Jeder Listeneintrag verweist auf einen Abschnitt. Zusätzlich wird zu jedem Abschnitt ein Bild eingefügt.