Anpassen einer Bildergalerie Variante über CSS-Only

Nutzbar ab: Version 008.000.207.000

25. Feb 2016

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.

Beispiel 1: Bildergalerie-Variante 0 mit Fancybox-Ansicht

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.

Vor der Anpassung

Bildergalerie-Variante 0 (Großansicht mit Diavorschau horizontal)zoom
Bildergalerie-Variante 0 (Großansicht mit Diavorschau horizontal)

Beispiel: Auszug aus der design.css zur Bildergalerie-Variante 0 (Großansicht mit Diavorschau horizontal)

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

Nach der Anpassung

Bildergalerie-Variante 091 (Diavorschau horizontal mit Fancybox)zoom
Bildergalerie-Variante 091 (Diavorschau horizontal mit Fancybox)

Beispiel: Auszug aus der design.css zur Bildergalerie-Variante 091

/* ... */
/*@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!

Beispiel 2: Bildergalerie-Variante 12 mit Fancybox-Ansicht

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.

Vor der Anpassung

Bildergalerie-Variante 12 (Vorschabilder zum horizontal scrollen)zoom
Bildergalerie-Variante 12 (Vorschabilder zum horizontal scrollen)

Beispiel: Auszug aus der design.css zur Bildergalerie-Variante 12 (Vorschabilder zum horizontal scrollen)

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

Nach der Anpassung

Bildergalerie-Variante 1201 (Vorschabilder zum horizontal scrollen mit Fancybox)zoom
Bildergalerie-Variante 1201 (Vorschabilder zum horizontal scrollen mit Fancybox)

Beispiel: Auszug aus der design.css zur Bildergalerie-Variante 1201

/* ... */
/*@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!

Beispiel 3: Bildergalerie-Variante 0 mit individueller Hintergrundfarbe für beschnittene Bilder

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).

Vor der Anpassung

Bildergalerie-Variante 0 (Großansicht mit Diavorschau horizontal) Hintergrundfarbe Standardzoom
Bildergalerie-Variante 0 (Großansicht mit Diavorschau horizontal)
Hintergrundfarbe Standard

Beispiel: Auszug aus der design.css zur Bildergalerie-Variante 0 (Großansicht mit Diavorschau horizontal)

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

Nach der Anpassung

Bildergalerie-Variante 10000 (Großansicht mit Diavorschau horizontal) Hintergrundfarbe Individuellzoom
Bildergalerie-Variante 10000 (Großansicht mit Diavorschau horizontal)
Hintergrundfarbe Individuell

Beispiel: Auszug aus der design.css zur Bildergalerie-Variante 10000 (Großansicht mit Diavorschau horizontal)

/* ... */
/*@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}
/* ... */
 
Beachten Sie je nach Webserver bzw. PHP die Hintergrundfarbe für ein Bild ggf. nur über das PHP GD-Modul und nicht über ImageMagick angewandt werden kann!

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 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!

Ähnliche Seiten

Entwicklerbereich Weblication® CMS - © Scholl Communications AG