So beeinflussen Sie die Fancybox-Einstellungen beim Bildelement
16. Feb 2011
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.
Beschreibung vor Einführung der Weblication® wLightbox (ca. Februar 2014)
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.
Standardmässig ist dies ohne abdunkeln des Hintergrundes umgesetzt.
Wollen Sie - ähnlich bei diversen Bildergalerien - den Hintergrund verdunkeln, können Sie das direkt über die in der BASE mitgelieferte design.js beeinflussen.
Tipp:
Die entsprechende Stelle finden Sie in der design.js am schnellsten, wenn Sie nach dem Begriff "overlayShow" suchen. Von den Treffern finden Sie die korrekte/n Stelle/n im Block "Initialisieren der Seite".
Im nachfolgenden Beispiel wurde der Parameter "overlayShow" von false auf true gesetzt, um diese Funktionalität zu aktivieren. Zudem wurde der Wert "overlayOpacity" von 1 auf 0.4 gesetzt, um den Hintergrund nicht komplett abzudunkeln, sondern durchscheinen zu lassen (transparent). Die Farbe können Sie mit dem Parameter "overlayColor" beeinflussen. Mit dem Wert #CC0000 wird die Hintergrundfarbe der Fancybox-Funktionalität auf einen Rot-Ton eingestellt.
Beispiel: Auszug aus der design.js zur Fancybox-Einstellung
// Code wurde zur besseren Lesbarkeit auf Zeilen aufgeteilt:
jQuery("a.boxPicture, a.boxPictureOnly").fancybox({
"type": "image",
"titlePosition": "inside",
"transitionIn" : "none",
"transitionOut" : "none",
"hideOnContentClick": true,
"zoomOpacity": true,
"zoomSpeedChange": 200,
"zoomSpeedIn": 400,
"zoomSpeedOut": 400,
"overlayShow": true,
"overlayColor": "#CC0000",
"overlayOpacity": 0.7});