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)