Veröffentlichungsdatum: 25. Februar 2016
Änderungsdatum: 05. Mai 2023
css css-only weblics bildergalerie galerie
CSS-Only Varianten von Weblics® können Sie über CSS individuell anpassen
Mit den Weblics® stehen Ihnen zahlreiche fertige Anwendungen zur Verfügung, die Sie bei Bedarf individuell anpassen können.
Am Beispiel der Bildergalerie "Großansicht mit Diavorschau horizontal" (Variante 0) demonstrieren wir Ihnen, wie Sie diese Galerievariante anpassen können (Stand: September 2013). Die Großansicht eines Bildes soll auf eine Fancybox-Ansicht umgestellt werden.
/* ... */ /*@wCssFragment{class:listPictureGallery;variant:0;caption:Großansicht mit Diavorschau horizontal;caption-en:Large image with horizontal thumbnails below}*/ .listPictureGallery_var0 {-w-editmaskExtended-picturemode:yes;-w-editmaskExtended-picturepreviewmode:yes;-w-editmaskExtended-pictureaspectratio:yes;} /* ... */ .listPictureGallery_var0 .listEntries .listEntryImage {display:block;width:100%;height:auto;-w-aspectratio:1.333;-w-picture-mode:crop} /* ... */ {text-decoration:none} .listPictureGallery_var0 .listEntriesPreview .listEntryImage {width:64px;height:48px;display:block;-w-picture-mode:crop;} /* ... */
/* ... */ /*@wCssFragment{class:listPictureGallery;variant:091;caption:Diavorschau horizontal mit Fancybox;caption-en:Horizontal thumbnails with Fancybox}*/ .listPictureGallery_var091 {-w-usefancybox:yes;-w-editmaskExtended-picturemode:yes;-w-editmaskExtended-picturepreviewmode:yes;-w-editmaskExtended-pictureaspectratio:yes;} /* ... */ .listPictureGallery_var091 .listEntries .listEntryImage {-w-display:none;display:none;width:100%;height:auto;-w-aspectratio:1.333;-w-picture-mode:crop} /* ... */ .listPictureGallery_var091 .listEntriesPreview .listEntryImage {-w-add-classes:wglFancybox;width:64px;height:48px;display:block;-w-picture-mode:crop;} /* ... */
Anhand diesem Beispiel sehen Sie, wie einfach eine bestehende CSS-Only-Variante nach eigenen Vorstellungen angepasst werden kann. Zur Veranschaulichung zeigen die oben ersichtlichen Quelltextbeispiele zur Standardauslieferung (var0) und angepassten Variante (als var091 benannt) nur die zu ändernden Zeilen.
Das Großbild wird also mit -w-display:none ausgeblendet und dafür für die Vorschaubilder die Klasse wglFancybox hinzugefügt. Über die allgemeine CSS-ID für die Variante wird zudem über -w-usefancybox:yes der Einsatz der Fancybox erlaubt.
Fertig ist die individuelle Bildergalerie-Variante über reine CSS-Anpassung!
Am Beispiel der Bildergalerie "Vorschaubilder zum horizontal Scrollen" (Variante 12) demonstrieren wir Ihnen, wie Sie diese Galerievariante anpassen können (Stand: März 2015). Bei Klick auf ein Vorschaubild soll das Großbild in einer Fancybox dargestellt werden.
/* ... */ /*@wCssFragment{class:listPictureGallery;variant:12;caption:Vorschaubilder zum horizontal Scrollen;caption-en:Thumbnails to scroll horizontally}*/ .listPictureGallery_var12 {-w-editmaskExtended-picturemode:yes;-w-editmaskExtended-picturepreviewmode:yes;-w-editmaskExtended-pictureaspectratio:yes;} /* ... */ .listPictureGallery_var12 .listEntriesPreview {-w-add-classes:wglOverflowXTouch;cursor:e-resize;position:relative;overflow:hidden;margin-left:5%;width:90%} /* ... */ {text-decoration:none} .listPictureGallery_var12 .listEntriesPreview .listEntryImage {width:240px;height:120px;-w-aspectratio:2;display:block;-w-picture-mode:crop;} /* ... */
/* ... */ /*@wCssFragment{class:listPictureGallery;variant:1201;caption:Vorschaubilder zum horizontal Scrollen mit Fancybox;caption-en:Thumbnails to scroll horizontally with fancybox}*/ .listPictureGallery_var1201 {-w-usefancybox:yes;-w-editmaskExtended-picturemode:yes;-w-editmaskExtended-picturepreviewmode:yes;-w-editmaskExtended-pictureaspectratio:yes;} /* ... */ .listPictureGallery_var1201 .listEntriesPreview {cursor:pointer;position:relative;overflow:hidden;margin-left:5%;width:90%} /* ... */ {text-decoration:none} .listPictureGallery_var1201 .listEntriesPreview .listEntryImage {-w-add-classes:wglFancybox;width:240px;height:120px;-w-aspectratio:2;display:block;-w-picture-mode:crop;} /* ... */
Anhand diesem Beispiel sehen Sie, wie einfach eine bestehende CSS-Only-Variante nach eigenen Vorstellungen angepasst werden kann. Zur Veranschaulichung zeigen die oben ersichtlichen Quelltextbeispiele zur Standardauslieferung (var12) und angepassten Variante (als var1201 benannt) nur die zu ändernden Zeilen.
Für die Vorschaubilder wird die Klasse wglFancybox hinzugefügt. Über die allgemeine CSS-ID für die Variante wird zudem über -w-usefancybox:yes der Einsatz der Fancybox erlaubt. Um die seitliche Wischmöglichkeit der Vorschaubilder zu unterbinden wird dem Preview-Container einfach die hinzugefügte Klasse wglOverflowXTouch gelöscht. Der cursor wird auf pointer gesetzt.
Fertig ist die individuelle Bildergalerie-Variante über reine CSS-Anpassung!
Am Beispiel der Bildergalerie "Großansicht mit Diavorschau horizontal" (Variante 0) demonstrieren wir Ihnen, wie Sie diese Galerievariante anpassen können
(Stand: Februar 2016). Die Großansicht eines Bildes soll bei
zugeschnittenen Bildern den entstandenen Leerraum mit einer anderen Farbe auffüllen (standardmäßig wird mit weißer Farbe aufgefüllt).
/* ... */ /*@wCssFragment{class:listPictureGallery;variant:0;caption:Großansicht mit Diavorschau horizontal;caption-en:Large image with horizontal thumbnails below}*/ /* ... */ .listPictureGallery_var0 .listEntries .listEntryImage {display:block;width:100%;height:auto;-w-aspectratio:1.333;-w-picture-mode:crop} /* ... */
/* ... */ /*@wCssFragment{class:listPictureGallery;variant:10000;caption:Großansicht mit Diavorschau horizontal;caption-en:Large image with horizontal thumbnails below}*/ /* ... */ .listPictureGallery_var10000 .listEntries .listEntryImage {display:block;width:100%;height:auto;-w-aspectratio:1.333;-w-picture-mode:embed;-w-picture-background-color:#ffffcc} /* ... */
Anhand dieser Beispiele sehen Sie, wie einfach eine bestehende CSS-Only-Variante nach eigenen Vorstellungen angepasst werden kann. Zur Veranschaulichung zeigen die oben ersichtlichen Quelltextbeispiele zur Standardauslieferung (var0) und angepassten Variante (als var10000 benannt) nur die zu ändernden Zeilen.
Für das Großbild wird die CSS-Only-Eigenschaft -w-picture-background-color gesetzt und der gewünschte Farbwert angegeben.
Fertig ist die individuelle Bildergalerie-Variante über reine CSS-Anpassung!