So beeinflussen Sie die Fancybox-Einstellungen beim Bildelement
Veröffentlichungsdatum: 16. Februar 2011
Änderungsdatum: 15. September 2021
bild element fancybox jquery hintergrund abdunkeln vordergrund
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%}
/* ... */
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.