Hauptinhalt

Bildergalerie

letzte Aktualisierung der Seite: Version 2.19.0

Die Bildergalerie dient der Darstellung mehrerer Bilddateien. Informationen zur Gestaltung eines Akkordeons sind zu finden unter: Bildergalerie

JavaScript-Einbindung

Quellcode

window.additionalComponent.load('gallery', {
    el: '[data-component="523525"]:visible'
});

Parameter und Attribute

Funktionsaufruf - Zeile 3:

Name Bedeutug Werte Obligatorisch
data-component Attribut des HTML-Knotens an dem die Bildergalerie-Komponente initialisiert wird. alphanumerischer Wert JA

 

HTML-Einbindung

Quellcode

<div class="box">
    <h3 class="box-header">Bildergalerie-Auszug</h3>
    <div class="box-body">
        <div class="box-media">
            <div class="gallery"
                 data-element="justified-gallery"
                 data-source="http://www.sachsen.de/beispiel-galerie.json"
                 data-id="523525"
                 data-component="523525">
            </div>
        </div>
    </div>
</div>

Parameter und Attribute

DIV-Tag - Zeile 5:

Name Bedeutung Werte Obligatorisch
data-element Name des Elements, auf dem JavaScript-Funktionalitäten aufgerufen werden.

justified-gallery

 JA
data-source Vollquaifizierte URL, unter der die Quelldatei abgerufen werden soll. URL JA
data-id Dient der Identifikation mittels JavaScript und kann dem Wert data-component entsprechen. alphanumerischer Wert JA
data-component Dient der Identifikation mittels JavaScript und muss dem Wert data-component aus dem JavaScript-Code entsprechen. alphanumerischer Wert JA

Abhängigkeiten

  • jQuery
  • webs-ot-utils
  • underscore
  • justified.js

Definition der Quelldatei

Die Quelldatei ist eine JavaScript-Funktion, welche ein JSON zurückliefert. Die Quelldatei weist folgende Definition auf:

[
    {
        /* Beschriebungstext zum Bild - Darstellung im Vollbildmodus*/
        "text":"<p>Beschreibungstext zum Bild.</p>",
        /* Copyright-Hinweis zum Bild - Darstellung im Vollbildmodus*/
        "caption":"(&copy; dpa-Bildfunk)",
        /* URL zum Vorschaubild - Darstellung innerhalb der Kachelansicht */
        "path":"https://www.sachsen.de/img/bld_small.jpg",
        /* URL vom Originalbild - Darstellung im Vollbildmodus*/
        "zoom":"https://www.sachsen.de/img/bld_zoom.jpg",
        /* Setzen des Titelattributes des IMG-Knotens */
        "title":"",
        /* Setzen des Alt-attributes des IMG-Knotens */
        "alt":"",
        /* Breite des Vorschaubilds (path) */
        "width":5550,
        /* Höhe des Vorschaubilds (path) */
        "height":3450,
        /* URL zu einer optionalen Folgeseite dieses Eintrags */
        "href":"/termin-123456.html",
        /* Button-Beschriftung zu einer optionalen Folgeseite dieses Eintrags */
        "textBtn":"Zum Termin des Eintrags wechseln",
    },{
        /* Beschriebungstext zum Bild - Darstellung im Vollbildmodus*/
        "text":"<p>Beschreibungstext zum Bild.</p>",
        /* Copyright-Hinweis zum Bild - Darstellung im Vollbildmodus*/
        "caption":"(&copy; Vorname Name)",
        /* URL zum Vorschaubild - Darstellung innerhalb der Kachelansicht */
        "path":"https://www.sachsen.de/img/bild_small.jpg",
        /* URL vom Originalbild - Darstellung im Vollbildmodus*/
        "zoom":"https://www.sachsen.de/img/bild_zoom.jpg",
        /* Setzen des Titelattributes des IMG-Knotens */
        "title":"",
        /* Setzen des Alt-attributes des IMG-Knotens */
        "alt":"",
        /* Breite des Vorschaubilds (path) */
        "width":5510,
        /* Höhe des Vorschaubilds (path) */
        "height":3707
    },{
        ...
    },null
]

Mischform von Markup und Daten

Die favorisierte Vorgehensweise ist es, die Bildinformationen in eine separate Quelldatei auszulagern. Es ist jedoch auch möglich beide Informationen zu mischen und damit die Bildinformationen direkt in die eigentliche Seite einzubetten. In Zeile 10 wird ein Script-Tag definiert, der die Bildinformationen direkt als JSON-Array beinhaltet:

<div class="box">
    <h3 class="box-header">Bildergalerie-Auszug</h3>
    <div class="box-body">
        <div class="box-media">
            <div class="gallery"
                 data-element="justified-gallery"
                 data-id="523525"
                 data-source="http://www.sachsen.de/beispiel-galerie.json"
                 data-component="523525"
                 data-gallery-detail>
                <script type="application/json"  data-element="justified-gallery-data">
                    <!--                                                          -->
                    <!-- JSON-Array aus dem Abschnitt "Definition der Quelldatei" -->
                    <!--                                                          -->
                </script>
             </div>
        </div>
    </div>
</div>
zurück zum Seitenanfang