So beeinflussen Sie die Fancybox-Einstellungen beim Bildelement

Dieser Artikel beschreibt, wie Sie zum Bildelement die Fancybox-Einstellungen individuell anpassen.

Das Standard Bild-Element aus der Weblication® Projektbasis BASE bietet unter anderem die Möglichkeit, ein Detailbild festzulegen. Ist dies gesetzt, wird dies in der Ausgabe der Seite mit jQuery/Fancybox-Funktionalitäten erweitert. Ein Klick auf das eingebundene Bild öffnet das Detailbild somit im Vordergrund und dunkelt den Hintergrund entsprechend ab.

Umgesetzt ist dies seit ca. Februar/März 2014 in der BASE über die Weblication® eigene wLightbox-Funktion. Diese stellt eine von externen Fancybox-Plugins unabhängige Möglichkeit der Lightbox / Fancybox Umsetzung dar.

Im Gegensatz zur Umsetzung über externe Plugins von jQuery / Fancybox müssen Sie die Parameter zum Abdunkeln des Hintergrundes, etc. nicht mehr im Javascript-Code (z.B. design.js) vornehmen, sondern können dies bei der  Weblication® eigenen wLightbox rein über CSS in der design.css einstellen. Hierzu ist lediglich das aktuellste Bild-Weblic® und die aktuellste design.js (auch als Weblic® verfügbar), sowie die aktivierte Lightbox in der BASE Projektkonfiguration erforderlich.

Im nachfolgenden Beispiel wurde in der design.css zum Selektor .wLightboxBackground die Definition zur background-color verändert, um einen rötlich abgedunkelten Hintergrund zu erhalten. Was bei Fancybox-Umsetzungen über den Wert "overlayOpacity" erfolgt, können Sie in der wLightbox direkt zur background-color Definition als vierten Parameter zum rgba-Wert setzen (Deckkraft: z.B. 0.7).

Weiter unten ist ein Beispielbild eingebunden, das bei Klick auf das Beispielbild das Detailbild im Vordergrund öffnet und den Hintergrund rötlich abdunkelt.

Beispiel: Auszug aus der design.css zu den wLightbox Angaben

/* ... */
.wLightbox {position:fixed;z-index:120;top:0;width:100%;height:100%;}
.
wLightboxBackground {position:fixed;top:0;background-color:rgba(204, 0, 0, 0.7);width:100%;height:100%}
/* ... */
Beispiel-Bild
Beispiel-Bild

Ist der Einsatz der Weblication® wLightbox Funktionalität nicht möglich oder nicht gewünscht, können Sie dies in der BASE Projektkonfiguration deaktivieren und die Fancybox-Funktionalität nutzen. Hierzu finden Sie die Einstellungen direkt in der design.js, welche Sie auch dort individuell anpassen können. Bitte haben Sie Verständnis dafür, daß wir Anpassungen zu diesen externen Fancybox / jQuery Funktionalitäten nicht über den kostenlosen CMS-Support für Vertriebspartner abdecken können.