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.

2 Gedanken zu „Neue Funktionen bei Lightbox mit PhotoSwipe“

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