PhotoSwipe für FlatPress

Dieses FlatPress-Plugin gibt einzelne Bilder und ganze Bildergalerien mithilfe der JavaScript-Bibliothek PhotoSwipe aus. Diese bringt eine sehr ansehnliche Vollbild-Anzeige mit sich; auf Mobilgeräten wie Tablets oder Smartphones kann per Fingerwisch ("Swipe") durch die Bilder navigiert werden.
Da das Plugin FlatPress-Standardfunktionen für den Aufbau des Bild-HTMLs nutzt, können die gewohnten Parameter des [img]-Elements verwendet werden ("alt", "title", "height", "width" und "float"; siehe FlatPress-BBCode-Dokumentation).

Download: PhotoSwipe for FlatPress

photoswipe1.0.6.zip (102.63 KB)

Nutzung

Ein Einzelbild:

[photoswipeimage="images/image.jpg"]

Ein rechtsfloatendes Bild mit vorgegebener Breite:

[photoswipeimage="images/image.jpg" width="200" float="right"]

Eine Bildergalerie:

[photoswipegallery="images/NameOfTheGallery"]

Galerie mit vorgegebener Höhe der Vorschaubilder:

[photoswipegallery="images/NameOfTheGallery" height="100"]

HTML+CSS

Der HTML-Code der Bilder selbst wird von der BBCode-Standardfunktion do_bbcode_img() erzeugt (siehe fp-plugins/bbcode/plugin.bbcode.php). Deswegen können die Attribute des [img]-Elements ("width", "height" etc.) auch in den Syntaxelementen des PhotoSwipe-Plugins benutzt werden. Floatenden Bildern wird die entsprechende CSS-Klasse zugewiesen (z.B. "floatright").
Das Plugin umschließt das so erzeugte Bild-HTML mit einem <figure>-Element mit der gleichen CSS-Klasse wie das Bild (z.B. "floatright"). Das <figure> beinhaltet zudem eine <figcaption>, die den Untertitel des Bildes darstellt.
Das <figure> wiederum ist umschlossen von einem <div class="photoswipe">.

Galerien werden als eine Folge mehrerer Bilder wie oben beschrieben dargestellt, im Ganzen umschlossen von einem <div class="img-gallery">.

Untertitel für Galerien

Die Untertitel der Galeriebilder werden aus der Datei "texte.conf" ausgelesen, die im Galerieverzeichnis liegen muss. Enthält eine Galerie bspw. die Bilder 1.jpg, 2.jpg und 3.jpg, muss die texte.conf im gleichen Verzeichnis wie die Bilddateien liegen und so aussehen:

1.jpg = Untertitel des ersten Bildes
2.jpg = Das ist das zweite Bild.
3.jpg = Oh mein Gott, noch ein Bild!

Aktuell muss man die texte.conf noch für jede Galerie selbst erzeugen und manuell im Galerieverzeichnis ablegen. Ich habe noch nicht die Zeit gefunden, dafür eine Benutzeroberfläche zu bauen - vielleicht hast DU ja Lust...? :)

Changelog

2022-05-07: Version 1.0.6

Bugfix: Invalide HTML-Ausgabe korrigiert.

2022-04-09: Version 1.0.5

Bugfix: Prüfung, ob das BBCode-Plugin aktiviert ist (um Fehlermeldung zu vermeiden, wenn nicht).

2021-06-03: Version 1.0.4

Bugfix: texte.conf muss nun nicht mehr zwingend ISO-8859-1-kodiert sein.

2021-01-16: Version 1.0.3

Bugfix: Plugin lädt die eigene jQuery-Bibliothek nur, wenn das jQuery-Plugin nicht bereits aktiv ist.

2020-12-09: Version 1.0.2

Bugfix: initializePluginTags() muss public static sein.

2017-09-16: Version 1.0.1

Bugfix: getPhotoSwipeOverlay() und echoScriptTags() müssen static sein.

2017-08-11: Version 1.0

Initiale Version des Plugins.