Neue Funktionen bei Lightbox mit PhotoSwipe

Mittlerweile existiert Lightbox mit PhotoSwipe seit über zwei Jahren und hat über 6000 aktive Installationen :-).

Gegenüber der ursprünglichen Version habe ich PhotoSwipe mittlerweile um einige Funktionen erweitert:

  1. Eine Endlos-Schleife ist auch mit nur zwei Bildern möglich.
  2. Wenn keine Endlos-Schleife aktiv ist, werden die Pfeil-Knöpfe für das nächste oder vorherige Bild beim ersten und beim letzten Bild ausgeblendet.
  3. Die Vollbild-Ansicht kann auch mit drücken der Taste „F“ aktiviert werden.
  4. Beim Wechsel der Bilder mit den entsprechenden Knöpfen oder den Cursortasten in der Desktop-Ansicht erfolgt der Wechsel mit einer Animation ähnlich der Wischgeste in der mobilen Darstellung.

Darüber ist es jetzt auch möglich, WordPress-Bildergalerien und Gutenberg Galerie-Blöcke in ihrer eigenen Lightbox anzuzeigen.

13 Gedanken zu „Neue Funktionen bei Lightbox mit PhotoSwipe“

  1. Thomas Krüger

    Hallo Arno,
    wie kann man am besten bei einem weißen Hintergrund die Icons in dunkelgrauer Farbe anpassen?

    1. Arno Welzel

      Das geht leider nicht. Die Farbe der Icons wird in den Icon-Bildern selbst festgelegt. Eine Änderung der Icon-Bilder ist aktuell nicht vorgesehen.

      1. Thomas Krüger

        Nach etwas Trial & Error ist das Skin jetzt weiß mit dunkelgrauen Icons und dunkelgrauem Text, installiert zusammen mit dem WP Plugin Easy Photography Portfolio. Eine prima Kombination!

        1. Arno Welzel

          Bitte beachten: Anpassungen den den Skins gehen bei einem Plugin-Update verloren, wenn dafür Dateien des Plugins geändert wurden.

  2. Die Version, die heut neu kam, sorgt dafür, dass bei meiner Installation von WP Astra das Site Logo nicht mehr angezeigt wird.

    Wenn ich Photoswipe deaktiviere, erscheint das Logo wieder.

    Bug oder Feature?

    1. Hängt zusammen mit der LayzLoad Funktion des Plugins Autooptimize. Kann auch sein, dass diese ursächlich für diese Wechselwirkung ist.

      Soll heißen: Wenn ich dort mein Logofile zur Ausnahmeliste hinzufüge bzw. das Plugin ganz deaktivere, geht’s wieder im Zusammenspiel mit Photoswipe.

      1. Arno Welzel

        Ja, wenn bereits eine andere, JavaScript-basierte LazyLoad-Funktion aktiv ist, kann es Wechselwirkungen geben.

        Lightbox mit PhotoSwipe fügt das Attribut loading="lazy" zu Bildern hinzu, was dazu führen kann, dass JavaScript-basierte Varianten gar nichts mehr anzeigen. Man kann LazyLoad in Backend-Optionen von Lightbox mit PhotoSwipe aber auch ausschalten, wenn man das nicht benutzen möchte.

        1. Vielen Dank!

          (Mit LazyLoad Ausschalten meinst Du die PHP Datei zu editieren, nehme ich an?)

          Wünsche angenehme Ostertage!

          1. Arno Welzel

            Nein, ich meine in den Einstellungen im Backend von WordPress.

            Siehe auch die Screenshots:
            https://wordpress.org/plugins/lightbox-photoswipe/

            1. Vielen Dank!

              Hab’s jetzt gefunden (hatte es unter Settings übersehen, zu viele Plugins, zu viele Einträge…)!

              1. Arno Welzel

                Da andere Nutzer ebenfalls Probleme mit dieser neuen Option gemeldet habe, habe ich ich sie mit Version 2.77 wieder ausgeschaltet. Man kann es aber manuell wieder einschalten, wenn man möchte.

  3. B
    Berthold Steinhilber

    Hallo Arno Welzel,

    mich würde sehr interessieren, den dunklen Hintergrund etwas heller zu gestalten.
    Gibt es die Möglichkeit, die Opazität etwas auf heller zu stellen?
    Für Infos wäre ich sehr dankbar – ich finde photoswipe sehr gelungen.

    vielen Dank
    Berthold

    1. Arno Welzel

      Prinzipiell ist es möglich, den Hintergrund auch heller zu gestalten, indem man die CSS-Regeln für die Lightbox-Oberfläche anpasst. Für die Website fahrradzukunft.de, wo ebenfalls PhotoSwipe (allerdings ohne WordPress) verwendet wird, habe ich eine Variante mit grauem Hintergrund erstellt:

      https://fahrradzukunft.de/29/fosvelo-liegeradbau-an-der-schule/#bild-2

      Die relevanten Regeln für diese Anpassung lauten:

      .pswp__bg {
      background: #404040 !important;
      }

      .pswp__ui–fit .pswp__top-bar,
      .pswp__ui–fit .pswp__caption {
      background-color: rgba(64, 64, 64, 0.7) !important;
      }

      .pswp__button–arrow–left::before,
      .pswp__button–arrow–right::before {
      background-color: rgba(64, 64, 64, 0.7) !important;
      }

      Man kann diese Regeln entweder als Teil des eigenen Theme einbauen oder über den WordPress Customizer.

Öffentlichen Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Dies ist kein Kontaktformular! Wenn Du mir eine persönliche Nachricht schreiben möchtest, benutze die E-Mail-Adresse in meinem Impressum.

Du kannst die folgenden HTML-Tags im Kommentar verwenden:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>