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%}
/* ... */

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.

Beschreibung vor Einführung der Weblication® wLightbox (ca. Februar 2014)

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});