Lightbox
Die "Lightbox" ermöglicht es, Bilder in einer Javascript-Galerie darzustellen.
Wie aktiviere ich die Lightbox?
Die Lightbox verwendet zur Darstellung Javascript und CSS-Styles. Diese müssen im Haupttemplate ("index.html" im "skin"-Verzeichnis des Mandanten) eingebunden/angegeben werden. Die automatische Einbindung erfolgt über eine Zeile:
{init_lightbox}
Positionieren Sie diese Zeile am besten vor dem schließenden "</head>"-Tag (also noch innerhalb der "<head>"-Bereiches). Diese Änderung kann nur über Verzeichnis-Ebene (z.B. über Webdav-, FTP- oder SSH-Zugang) durchgeführt werden.
Die "init_lightbox"-Smarty-Funktion versteht folgende (optionale) Parameter:
- width: maximale Breite der angezeigten Bilder (Standard: 500px)
- height: maximale Höhe der angezeigten Bilder (Standard: 300px)
- thumbs: maximal angezeigte Thumbnails (Standard: 5)
Wie richte ich die Lightbox ein?
Nutzen Sie einen Text oder ein Bild und erstellen Sie daraus einen Link. Es öffnet sich ein Popup, in welchem Sie das Ziel des Links angeben können. Im gleichen Dialog finden Sie etwas weiter unten unter "Fenster" die Einstellung "In einer Lightbox öffnen (_lightbox)".
Damit die Lightbox auch angezeigt wird, muss der aktuell bearbeitete Link auf eine Bild (eines Multimedia-Bereichs) verweisen.
Angezeigt werden dann alle Bilder die sich im selben Verzeichnis befinden.
Lightbox in der Bildergalerie
Für eine Bildergalerie kann die Lightbox auf dem Reiter "Galerie" aktiviert und konfiguriert werden. Diese Einstellung finden Sie in der Standard-Bildergalerie.
Spezifische Änderungen
Beim Multimedia Bereich, aus dem das Bild stammt, muss unter "Verwaltung > Konfiguration > Mandant > Verschiedenes" der Haken "Links auf Bilder für PopUps erweitern" aktiviert sein.
Die grafische Gestaltung der Lightbox ist in der Datei "bin/lightbox/view_image.html" hinterlegt. Für eigene Anpassungen kopieren Sie diese Datei in das skin-Verzeichnis Ihres Mandanten. Ansonsten wird weiterhin der Systemstandard verwendet.
Folgende Javascript Funktionen stehen dabei zur Verfügung:
- gallery.close() = schliesst die Lightbox
- gallery.nextImage(false) = vorheriges Bild anzeigen
- gallery.nextImage(true) = nächstes Bild anzeigen
- gallery.popup(src) = öffnet das Bild in original Größe in einem neuen Fenster
- Für die Thumbliste:
- gallery.thumblist(false) = die Thumbliste nach links verschieben
- gallery.thumblist(true) = die Thumbliste nach rechts verschieben
- gallery.view(src, title) = zeigt das ausgewählte Bild an
- Dann gibt es auch noch einige IDs die vergeben werden können oder müssen:
- gallery_image = das angezeigte Bild
- gallery_current = das Xte Bild von allen verfügbaren
- gallery_max = maximal verfügbare Bilder
- gallery_image_back = das Bild für den Zurück Pfeil
- gallery_image_next = das Bild den Weiter Pfeil
- gallery_image_back_text = der Text für den Zurück Pfeil (optional)
- gallery_image_next_text = der Text Bild den Weiter Pfeil (optional)
- gallery_title = hier steht der Titel des Bildes
- gallery_thumbs = die Thumbliste (optional)
- gallery_thumb_back = das Bild für den Zurück Pfeil (Thumbliste, optional)
- gallery_thumb_next = das Bild für den Weiter Pfeil (Thumbliste, optional)