Lightbox in mobiler Ansicht deaktivieren
Der Artikel beschreibt, wie die Lightbox abhängig von den Breakpoints über -w-add-data:"isinactivelightbox=1" deaktiviert werden kann.
Ob Bilder oder Links, es ist abhängig von der Bildschirmgröße nicht immer erwünscht, die Daten in der Lightbox zu öffnen. Durch das Attribut data-isinactivelightbox=1 ist es möglich das zu verhindern.
Je nach Anwendungsfall, sollte das Attribut dem Element zugewiesen werden, das im HTML-Quelltext der Seite die Lightbox-CSS-Klasse (.wglLightbox, box, boxImage, etc) enthält.
Bitte beachten Sie bei Bildern, dass der Zoomer auch ausgeblendet werden sollte.
CSS-Beispiele
//Auszug aus listBannerSlider.css
.listBannerSlider_var400 {
-w-option-picture-lightbox:1; /* Bilder über Lightbox öffnen [0(Nein)|1(Ja)] */
-w-option-picture-lightbox-zoomer:1; /* Zoomer-Icon anzeigen [0(Nein)|1(Ja)] */
.listEntry {
//..
@media (max-width: $viewport_s_min){
.pictureZoomer {display:none !important;}
picture{-w-add-data:"isinactivelightbox=1";}
}
//..
}
}