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.

Update 2022-12-19

Die aktuelle Version meines Plugins bietet auch PhotoSwipe 5.

18 Gedanken zu „Neue Funktionen bei Lightbox mit PhotoSwipe“

  1. M
    Mick

    Plötzlich funktioniert Lightbox nicht mehr. Die Bilder werden einfach auf einer neuen Seite angezeigt. Eben als JPG usw. Keine Lightbox mehr.

    1. Arno Welzel

      Generell geht das Ding aber – siehe hier auf meiner Website und auf der Demo-Website dazu: https://wordpress-demo.arnowelzel.de/examples-lightbox-with-photoswipe/

      Generellen Support zu Problemen mit WordPress kann ich leider nicht leisten. Aber wenn Du mir genauere Infos per E-Mail schickst (Website etc.), kann ich zumindest mal eine Blick darauf werfen und vielleicht einen Tipp geben, was kaputt sein könnte.

      1. M
        Mick

        Das wäre aber sehr nett von Dir. Ich glaube, seit dem letzten WP Update geht‘s nicht mehr.

        https://michaelheinbockel.de/fotografie/

        1. Arno Welzel

          Das Problem ist, dass entweder der Backend-Teil die Bilder nicht mehr findet oder dass irgendein Caching-Plugin nicht korrekt arbeitet. Deshalb fehlen bei allen Bilder-Links in den Galerien die Attribute „data-lbwps-width“ und „data-lbwps-height“-Attribute für die Bildgrößen.

          Woran das aber liegt, kann ich aber alleine durch einen Blick auf die Website nicht genauer beurteilen.

          Weiterer Kontakt bitte per E-Mail oder über das WordPress-Supportforum (https://wordpress.org/support/plugin/lightbox-photoswipe/) – die Kommentarfunktion meiner Website ist nicht als Support-Forum gedacht, Danke!

  2. Hallo Arno,
    cool, dass du anscheinend PhotoSwipe weiter entwickelst. Danke dafür.
    „Eine Endlos-Schleife ist auch mit nur zwei Bildern möglich.“ Dieser Bug (smartphone only) wird beim Entwickler Dmitry Semenov seit Jahren moniert, aber dort passiert leider nichts.

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

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

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