Mittlerweile gibt es PhotoSwipe in der Version 5. Diese Version ist modular aufgebaut und wurde grundlegend überarbeitet, um auch mit aktuellen Browsern und Smartphones zuverlässig zu funktionieren.
Mein WordPress-Plugin Lightbox with PhotoSwipe wird in naher Zukunft ebenfalls PhotoSwipe 5 nutzen. Da vorherige Anpassungen bzgl. Styling nicht kompatibel sind zu PhotoSwipe 5, wird die ältere Version zunächst weiterhin als Auswahl verfügbar sein.
Update 2022-06-13:
Seien Sie gewarnt! Es stellt sich heraus, dass die Verwendung von Twig oder anderen Abhängigkeiten mit Composer in WordPress tatsächlich eine schlechte Idee ist! Das Problem ist, dass andere Plugins oder Themes möglicherweise auch dieselben Komponenten verwenden, aber in einer anderen Version – und dann können alle möglichen Konflikte auftreten! Ich empfehle daher bis auf weiteres NICHT, diesem Artikel zu folgen!
Der grundlegende Aufbau von WordPress-Plugins ist eher einfach gehalten:
Im Verzeichnis des Plugins wird als minimale Voraussetzung die Datei readme.txt mit einer Beschreibung im Header und eine PHP-Datei für die Plugin-Initialisierung benötigt. Es ist nicht zwingend erforderlich, eigene Klassen zu implementieren, da der Code von WordPress direkt ausgeführt wird – allerdings erleichtert eine Organisation in Klassen die Lesbarkeit und Wartbarkeit erheblich.
Schon vor längerer Zeit wurde mit Chrome 90 ein Feature eingeführt (davor gab es das schon als Extension), mit dem man über Links gleichzeitig einen Teil des verlinkten Textes markieren kann.
Dazu hängt man den zu markierenden Text mit als Fragment in der Form #:~:text= gefolgt vom Text an die URL an. Zum Testen ein Link auf diesen Artikel, der wie folgt gebildet wird: https://arnowelzel.de/a-propos-text-markieren-im-browser#:~:text=Teil%20des%20verlinkten%20Textes.
Beim Testen dieser Funktion habe ich festgestellt, dass die Markierung wieder verschwindet, wenn man eine Seite, die über eine solche URL geladen hat, aktualisiert.
Mein Beispiel für WebGL und der Monitor-Test nutzen zur Darstellung ein Canvas-Element. Zusätzlich ist jeweils die Möglichkeit vorhanden, die Darstellung auf den Vollbild-Modus umzuschalten. Technisch wird das mit dem Fullscreen API realisiert. Die Vorgehensweise ist dabei immer gleich:
requestFullscreen() das Canvas-Element auf Vollbild-Darstellung umgestellt.window.devicePixelRatio, damit die native Auflösung des Gerätes verwendet wird.Aktuelle Versionen von macOS wie auch Windows 10 bieten die Möglichkeit, die Oberfläche des Systems im „Dark Mode“ zu betreiben. In diesem Modus werden Hintergründe von Fenstern werden dunkel dargestellt und Texte hell.
Auch Websites können diese Einstellung mit der CSS-Media-Query prefers-color-scheme: dark unterstützen, indem sie für den „Dark Mode“ ein angepasstes Farbschema verwenden.
Ab sofort gibt es auf meiner Website eine Suche mit Ergebnissen in Echtzeit, die als Trefferliste unterhalb des Suchfelds angezeigt werden. Ich habe dazu eine Erweiterung für WordPress entwickelt, die auf die Ajax-Schnittstelle zugreift und bereits während der Eingabe die Suche ausfüht.
Ja, es gibt dafür bereits Plugins – allerdings war die Umsetzung nicht all zu schwer (etwa 190 Zeilen Code) und ich habe dabei etwas über Ajax mit WordPress gelernt.
Die Bedienung mit der Tastatur ist auch möglich – man kann mit der Tabulator-Taste (der Taste, mit dem man im Browser den Focus wechselt) vom Suchfeld zur Liste wechseln und zwischen den Listeneinträge navigieren. Auch die Cursortasten [↓] und [↑] können für die Navigation benutzt werden. Zum öffnen eines Eintrag Return ([↵]) oder [Enter] drücken. Mit [Esc] wird die Liste mit den Suchergebnissen wieder geschlossen, ohne einen Eintrag auszuwählen.
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:
Darüber ist es jetzt auch möglich, WordPress-Bildergalerien und Gutenberg Galerie-Blöcke in ihrer eigenen Lightbox anzuzeigen.
Die DNS-Abfrage zeigt jetzt auch die Inhalte von CAA-Records (Flag, Tag und Value) an.
Ursprünglich habe ich Lightbox mit PhotoSwipe nur erstellt, um PhotoSwipe überhaupt nutzen zu können. Dabei wurden anfangs manche Möglichkeiten noch gar nicht genutzt.
Bisher habe ich für die vergrößerte Anzeige von Bildern das Plugin „Responsive Lightbox“ verwendet. Leider hatte diese Lösung aber einige Schwächen:
Besonders die fehlende Möglichkeit der Bildvergrößerung ist mir bei einer anderen Website aufgefallen, wo ich Leute gesehen habe, die auf ihren Smartphones versucht haben, einzelne Bilder mit der üblich Zwei-Finger-Geste zu vergrößeren.
Als Alternative habe ich schließlich PhotoSwipe entdeckt – eine JavaScript-Bibliothek, die nicht nur eine Vergrößerung der Bilder per Mausklick oder Finger-Gesten ermöglicht, sondern auch eine bildschirmfüllende Vollbild-Ansicht. Auch die Reaktion auf Eingaben ist deutlich flüssiger als bei „Responsive Lightbox“.
