Sie sind hier: Startseite · Artikel · PhotoSwipe

Testseite für PhotoSwipe – noch eine Lightbox-Alternative

Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.

Fotogalerie

Die Fotogalerie basiert auf dem Script PhotoSwipe von Dmitry Semenov.

Eigenschaften

• PhotoSwipe benötigt kein JavaScript-Framework, sondern nutzt lediglich plain JavaScript und CSS. (Hier auf der Demoseite läuft zwar jQuery — für andere Funktionen, es wird aber von PhotoSwipe nicht genutzt.
• Die Installation ist relativ aufwendig. Am einfachsten ist es wohl, die lauffähige Demo von Codepen zu installieren, und auf die eigenen Bedürfnisse anzupassen: codepen.io/dimsemenov/pen/ZYbPJM → Export → Export.zip
• Viele pfiffige, zeitgemäße Features. U. a. Fullscreen-Ansicht.
• Photoswipe liefert ein perfektes Look & Feel auf Smartphones. Zahlreiche Gesten werden unterstützt.
• Bildbeschreibungen können optional im Tag <figcaption> eingegeben werden. Mittels CSS kann die Bildbeschreibung wahlweise im Popup gezeigt, und / oder von Screen Readern gelesen werden.

CSS (Auszug):

.my-gallery figcaption { /*display: none;*/ /* So wird figcaption von SR gelesen: */ display:block; position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } .pswp__caption { /* display:none; falls caption nicht angezeigt, sondern nur von SR gelesen werden soll */ }

• aria-hidden="true" im verlinkten Popup verbirgt den Link für Screen Reader. Screen Reader Nutzer können dadurch auch nicht versehentlich das für sie nutzlose und lediglich irritierende Popup öffnen. (Das klappt — erwartungsgemäß — leider nicht mit allen Screen Readern gleich gut.)

HTML (Auszug):

<figure> <a aria-hidden="true" href="pfad/zum/Bild.jpg" data-size="750x1000"> <img src="pfad/zum/Thumb.jpg" alt="..." /> </a> <figcaption> Bildbeschreibung </figcaption> </figure>

• Im Gegensatz zu Fancybox und Magnifc Popup kann PhotoSwipe leider nicht auf der Seite verteilte Vorschaubilder (mit dazwischen liegendem Text) zu einer einzigen Galerie zusammenfassen. Ein Stilmittel, das ich bisher mit Fancybox gerne nutzte.
• Das CSS validiert nicht, weil experimentelle Techniken eingesetzt werden.

Nachtrag 13.07.2016

• PhotoSwipe arbeitet perfekt mit Adaptive Images zusammen. Adaptive Images liefert an kleine Monitore automatisch in der Größe angepasste Bilder. Die beiden Großbilder dieser Seite werden so an Smartphones mit 49 respektive 26 kB anstelle von 389 / 186 kB ausgeliefert. (Und selbstverständlich werden sie von PhotoSwipe erst geladen, wenn sie auch aufgerufen werden.) Das ist echtes AWD (Adaptive Web Design), wie ich es verstehe.
• Auch nach Entfernung aller nicht validen CSS-Anweisungen läuft das Script jetzt — ohne jegliche Einschränkungen?

Nachtrag 15.12.2020

Zufällig entdeckt: Arno Welzel entwickelt das Script weiter.
„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.

Fazit

Derzeit bestes Galerie-Script. Schlank, responsive, und – mittels weniger Anpassungen – barrierefrei.

Weitere getestete Galerie-Scripts:

• Magnific Popup
• Fancybox

Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.

1. Arno Welzel schrieb am Dienstag, 15.12.20 17:37 Uhr:

   Danke für den Hinweis auf meine Weiterentwicklung im Rahmen des WordPress-Plugins, was ich dafür anbiete - ich heiße aber immer noch "Welzel" und nicht "Wetzel" ;-)

   Edit: Ach, sei halt nicht so kleinlich. Es sind ja nur ein paar Pixel Unterschied. ;-)