Anleitung Responsive Lightbox

Die Responsive eXtro Lightbox

besteht aus einem Modul und einem Plugin. Beide Versionen der Lightbox haben Ihre eigenen Vorteile:

Das Modul erzeugt automatisch Vorschaubilder, es muss lediglich der entsprechende Pfad angegeben werden. Es kann an jeder beliebigen Modulposition veröffentlicht werden, oder aber direkt in einem Artikel mittels des loadmodule plugins. Die Lightbox erzeugt einen sog. Roadtrip bei dem die Bilder zusammengefasst werden und zum nächsten/vorherigen Bild weitergeschaltet werden kann.

Mit der Pluginversion der responsive eXtro Lightbox können überall auf einer Seite Thumbnailbilder mit klickbarer Lightbox angezeigt werden. Das Plugin erzeugt allerdings keine automatischen Vorschaubilder, hier müssen Thumbnail und Vollbild separat angegeben werden. Der Tag erlaubt es ebenfalls wie das Modul, zusammengefasste Bilder als sog. Roadtrip auszugeben, d.h. in der Lightbox kann mittels Pfeilen weitergeschaltet werden. Das Plugin erlaubt es dem Benutzer, eigene optimierte Thumbnails zu verwenden, oder aber Vorschaubilder, die komplett anderen Inhalt zeigen als das Vollbild.

Sowohl Modul als auch Plugin sind vollständig responsive aufgebaut, so dass der Inhalt der Lightbox immer optimiert ausgegeben wird, egal ob die Seite auf einem kleinen Mobildisplay oder einem großen Desktopbildschirm angezeigt wird.

Anleitung Plugin:

Nach der Installation und Aktivierung in Joomla kann das Plugin verwendet werden. Geben Sie hierzu in einem Artikel an der gewünschten Stelle den Tag 

{extrolb **Parameter**}
ein, eine Liste mit verfügbaren Parametern finden Sie untenstehend. Im Backend des Plugins können Sie auswählen, ob jQuery geladen werden soll oder nicht.

eXtro Lightbox Plugin Parameter

Tag mit allen Parametern:

{extrolb tnimg=images/joomla_black.gif|fimg=images/joomla_black.gif|tnw=120|tnh=90|title=Bildtitel|class=myclass|olc=#000|olo=75|fio=500|fii=500|foi=500|eoc=true}

Bis V3.2.0 sind nur die Parameter tnimg und fimg zwingend notwendig. Ab V4.0.0 ist nur der Parameter fimg zwingend notwendig, da das Plugin ab dieser Version ein Thumbnailbild automatisch berechnen kann.

Erläuterung der einzelnen Parameter:

tnimg:
Mit diesem Parameter definieren Sie das Vorschaubild für das anzuzeigende Bild. Geben Sie den vollen Pfad des Vorschaubilds an, zB images/MeinOrdner/MeinVorschauBild.jpg Dieser Parameter ist zwingend erforderlich.
fimg:
Der Parameter fimg definiert das Vollbild, das innerhalb der Lightbox angezeigt wird. Geben Sie den vollen Pfad des Bildes an, zB images/MeinOrdner/MeinBild.jpg
title:
Mit dem Parameter title können Sie dem Bild einen optionalen Titel geben, der als Titel beim Vorschaubild und im Vollbildmodus als Bildüberschrift verwendet wird.
class:
Mit dem Parameter class können Sie einen sog. Roadtrip erzeugen, d.h. alle Bilder mit derselben Klasse werden als zusammengehörig angesehen und können im Vollbildmodus durchgeschaltet werden.
tnw:
Der Parameter tnw legt die Breite des zu berechnenden Thumbnails fest. Ein TN wird nur berechnet, wenn Sie kein eigenes Thumbnail auswählen.
tnh:
Der Parameter tnh legt die Höhe des zu berechnenden Thumbnails fest. Ein TN wird nur berechnet, wenn Sie kein eigenes Thumbnail auswählen.
olc:
Der Parameter olc setzt die Overlay Color, d.h. die Hintergrundfarbe im Vollbildmodus. Standardmäßig wird diese Farbe auf #000000 gesetzt. Geben Sie diese Farbe im Standard CSS Format ein, zB #000000 für Schwarz oder #ffffff für Weiß
olo:
Die Overlay Opacity (olo) definiert die Durchsichtigkeit des Hintergrunds in Prozent. Erlaubt sind Werte zwischen 0 (komplett durchsichtig) und 100 (komplett undurchsichtig). Der Standardwert ist 75.
fio:
Die Fade In Overlay Duration (fio) legt fest, wie lange es dauert bis der Hintergrund im Vollbildmodus komplett sichtbar ist. Erlaubte Werte sind Zahlen > 0, der Wert wird in Millisekunden angegeben.
fii:
Die Fade In Image Duration (fii) legt fest, wie lange es dauert bis das Bild im Vollbildmodus komplett sichtbar ist. Erlaubte Werte sind Zahlen > 0, der Wert wird in Millisekunden angegeben.
foi:
Die Fade Out Image Duration (foi) legt fest, wie lange es dauert bis der Vollbildmodus beendet ist. Erlaubte Werte sind Zahlen > 0, der Wert wird in Millisekunden angegeben.
eoc:
Exit on Background Click (eoc) legt fest, ob der Vollbildmodus mit Klick auf den Hintergrund beendet werden kann oder nicht. Erlaubte Werte sind true und false. Bei true kann der Vollbildmodus mit Klick auf den Hintergrund beendet werden, bei false nicht.

Anleitung Modul:

Im backend des Moduls können Sie alle Parameter setzen, die im Plugin erlaubt sind, plus einige mehr.

jQuery laden:
Soll das jQuery Framework geladne werden?
CSS Datei laden:
Soll die CSS Datei eingefügt werden ?
Bildverzeichnis auswählen / eigenes Bildverzeichnis:
Hier können Sie das Verzeichnis, in dem Ihre Bilder gespeichert sind, auswählen bzw selbst angeben.
Breite und Höhe des Thumbnails:
Die vom Modul erzeugten Thumbnails haben diese Größe.
Sortierung:
Wählen Sie hier, in welcher Reihenfolge die Thumbnails angezeigt werden sollen.
Bildnamen anzeigen:
Bei Ja wird der aktuelle Bildname in der Lightboxansicht angezeigt
Weiterschalten aktivieren:
Bei Ja kann per klick auf die Pfeile weitergeschaltet werden.
Hintergrundschliessen aktivieren:
Bei Ja kann mit klick auf den Hintergrund die Lightbox geschlossen werden.
Overlay Farbe/Transparenz:
Wählen Sie hier die Farbe und Transparenz der Lightbox aus.
Dauer des Overlay fade / Image fade in / Image fade out:
Hier können Sie einstellen, wie lange es dauert den Overlay und die Bilder zu faden.
Bilder für Pfeil links / rechts / Schliessen icon / Lade-icon:
Wählen Sie hier die Bilder für den Pfeil nach rechts/links, das Schliessen- und Ladeicon aus.
Overlaybild der Thumbnails:
Wählen Sie aus, welches Bild beim hovern über die Thumbnails gelegt werden soll.

2024-12-01