Lightbox-Darstellung beeinflussen

Veröffentlichungsdatum: 11. Februar 2019
Änderungsdatum: 08. August 2023
Projektgrundlage: BASE

Die Darstellung der Lightbox beim Öffnen von Detailbildern lässt sich individuell beeinflussen.

Am Beispiel der Bildergalerie-Variante 2 (Kachelansicht) zeigen wir Ihnen auf, wie Sie die Darstellung der Lightbox bei Klick auf ein Vorschaubild beeinflussen.
Es soll eine individuelle Variante der Lightbox verwendet werden, welche eine fest definierte Höhe und eine andere Hintergrundfarbe zugewiesen bekommt.

Schritt 1: Zuweisen der Lightbox-Variante über w-jquery

Der Bildergalerie-Variante 2 wird zum picture-Tag über jQuery ein Data-Attribut "boxPicture2" ergänzt, auf welches später per JavaScript und CSS zurückgegriffen werden kann.

Beispiel: Auszug aus der listPictureGallery.scss zu Bildergalerie-Variante 2 - Erweiterung per jQuery

/*@wCssFragment{class:listPictureGallery;variant:2;caption:Kachelansicht;caption-en:Dia view}*/
.listPictureGallery_var2 {

  /* ... */

  @media only screen and (max-width: $viewport_s_max){
      
    .listEntries {
      /* ... */

      .listEntryImage {
        display:block;
        width:100%;
        max-width:100%;
        height:auto;

        picture {            
          -w-jquery:jQuery(this).attr('data-variant', 'boxPicture2');   
          display:block;
        }
      }

      /* ... */

    }
    /* ... */
  }
  /* ... */
}

Hiermit wird die gewünschte Variante der Lightbox zugewiesen. Bei Aufruf der Lightbox prüft die aktuelle ui.js automatisch auf das Data-Attribut und zieht sich aus der in Schritt 2 genannten design.js über die dort definierte Variable die weiteren Informationen.

Schritt 2: Definition der Lightbox-Variante über JS

In der design.js definieren Sie die Variable für die individuelle Lightbox-Variante (boxPicture2) und weisen dieser die CSS-Klasse image2 zu.

Beispiel: Auszug aus der design.js zur Definition der Lightbox-Variante boxPicture2

wLightboxVariants['boxPicture2'] = {'class' : 'image2', 'scrollIfToHeight' : false, 'limitSizeIfPicture' : true};

Schritt 3: Darstellung der Lightbox-Variante im CSS definieren

Die eigentliche Darstellung der Lightbox definieren Sie dann in der lightbox.scss und legen dort passend zur CSS-Klasse z.B. eine fixe Höhe und andere Hintergrundfarbe fest.

Beispiel: Auszug aus der lightbox.scss zur individuellen Lightbox-Variante image2

.wLightbox, .wLightbox-image, .wLightbox-image2, .wLightboxStatusLoaded{
  
  .wLightboxBackground {
    background-color: rgba(240, 160, 40, 0.9);
  }
  .wLightboxInner {
    height:350px !important;
  }
}

Hinweis

Beachten Sie, dass ein Link nur dann in einer Lightbox aufgerufen wird, wenn das a-Tag eine bestimmte CSS-Klasse oder ein bestimmtes target-Attribut enthält. Welche das genau sind, können Sie in der design.js der Funktion addLinksToTarget, entnehmen.

Sollten Sie für das Link-Item eine eigene Zielvariante angelegt haben, ist es ggf. notwendig dem a-Tag zusätzlich die CSS-Klasse "box" zuzuweisen.

Bei Verwendung einer individuellen Darstellungsvariante (wie in Schritt 1), wählen Sie in der Link-Konfiguration im Editor als Zielvariante "Lightbox" aus.