Lightbox-Darstellung beeinflussen

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