Bildergalerie ohne Jetpack: Justified Galerie

Update: Inzwischen hat sich Responsive Lightbox & Gallery noch besser durchgesetzt.

Erfolgreicher Test

Die Jetpack Galerie-Funktion wurde testweise hiermit ersetzt – und alle vorherigen Galerien wurden perfekt übernimmen! Es ändert sich hierdurch auch NICHTS an der Art, wie die Galerien eingefügt werden, alles ist so geblieben – nur die Darstellung ist jetzt besser und die Lightbox sieht auch schöner aus:

Anleitung zur Umstellung

Via Design > Anpassen (Customizer) > CSS Style für das  anpassen:

/* =========================== */
/* Justified Galerie: */
/* Suchlupenhintergrund */
.dgwt-jg-effect-standard .dgwt-jg-caption{
background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0 !important;
}
/* Beschriftung (Overlay) */
.dgwt-jg-effect-standard .dgwt-jg-caption span{
letter-spacing:0px;
font-weight:700 !important;
font-size:150%;
}
/* Beschreibung (Untertitel) */
.pswp__caption .dgwt-jg-item-desc
{
letter-spacing:0px;
font-weight:300 !important;
font-size:150% !important;
padding-bottom:25px;
}
/* =========================== */

Um den Hintergrund der Lightbox (Typ „Photoswipe“) auf weiss zu ändern:

Via File Manager

1. Gehe zu: wp-content/plugins/justified-gallery/incoudes/lightbox/photoswipe/assets/default-skin
2. Hierin 2 Unterodner anlegen: default-black und default-white
3. Den Inhalt von default-skin komplett in default-black kopieren
4. Inhalt aus wp-content/plugins/justified-gallery/incoudes/lightbox/photoswipe/assets/white-light-skin
   komplett in default-white kopieren
5. wp-content/plugins/justified-gallery/incoudes/lightbox/photoswipe/assets/default-skin
   leer machen und mit allen Dateien aus default-white ersetzen (kopieren).
6. Die CSS Datei (nur die!), die „skin.css“ heisst, in „default-skin.css“ umbenennen. Fertig.

Ob das nach jedem Plugin Update wieder erforderlich ist, bleibt abzuwarten.

Tipps und Tricks

• Wenn Bilder, die als „nicht verlinkt“ eingerichtet sind, trotzdem einen Link ausgeben, dann dieses CSS verwenden:

.dgwt-jg-item {
pointer-events: none;
}