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)