Bilder zeigen

Zwei Beispiel-Bildergalerien

Nach dem Anklicken öffnet sich eine Lightbox (z.Zt. bei «Photo Gallery» leider beide LB, solange beide installiert sind).


1.) By «Photo Gallery» Plugin – works fine after deactivating «WP Lightbox 2».

Vorteile

  • hat Thumbs in der Gallery View
  • vielfältige Settings
El Cotillo
El Cotillo
El Cotillo © Lutz Kasper
Hohenzollern-Brücke
Hohenzollern-Brücke
Brücken © Lutz Kasper
Godorf, Hafen
Godorf, Hafen
Godorf, Hafen © Lutz Kasper
Swimming Landscape
Swimming Landscape
Zubringer © Lutz Kasper
Raffinerie
Raffinerie
Godorf, Hafen © Lutz Kasper
Düsseldorf, Hafen
Düsseldorf, Hafen
Düsseldorf, Hafen © Lutz Kasper
Flieger!
Flieger!
Flieger! © Lutz Kasper
Brücken
Brücken
Brücken © Lutz Kasper

Erstreckt sich über Content-Breite. Einstellbar: Thumb-Größe, welcher Text wird bei Mouseover angezeigt, BU (Caption bzw. > Gallery Views > Show image descriptions) anzeigen oder nicht, Schriftarten und -größen. Von Standard-Farbgebung «weiß» auf «dark» umgestylt. S. CSS im Customizer > Abschnitt /* von weiß auf dark umstylen */


1.a) Problem, wenn beide Lightboxen aktiviert sind:

When closing the «Photo Gallery by 10Web» lightbox (LB), there is a second LB showing up that I have to close as well. Solution: It’s because there’s a second Plugin «WP Lightbox 2» activated. After deactivating «WP Lightbox 2» the issue was gone and «Photo Gallery by 10Web» worked fine. Supposably they disturb each other.


2.) Veraltetes (vorübergehend waren keine Captions mehr sichtbar) «WP Lightbox 2» -Plugin. Es gibt Settings. Evtl. kommt noch ein Update.

Die Spaltenanzahl ist variabel. Es können Hoch- oder Querformate eingesetzt werden. Als Vorschau wird bei Auswahl „Vorschaubild“ ein Quadrat gezeigt, ansonsten das ganze Bild. Wird von Haus aus auf kleinen Screens nicht 1- od. 2-spaltig. Habe ich gelöst, indem ich eine media query für Mobiles (<59.6875em) erstellt habe – und – die zuständige Klasse für 4-spaltig „.gallery-columns-4 .gallery-item“ von 25% auf 50% gesetzt habe.

.gallery-columns-4 .gallery-item {
max-width: 50%;
}