Bild "misc:de.png" Bild "misc:gb.png"

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.zip (102.61 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...? :)

Über diese Website

Bild "Start:arvid.jpg"
Arvid Zimmermann macht was mit Computern im Ruhrpott. Mehr...

Presse

Mix2Stix wurde auf der Heft-DVD der c't-Ausgaben 14/2011 und 15/2012 ausgeliefert und im Heft vorgestellt.
Bild "Mix2Stix:ct-logo.jpg"

Die PC Praxis wählt Mix2Stix in Ausgabe 06/2008 in die "Top of the tools". Zitat: "So simpel kann gute Software sein!"
Bild "Mix2Stix:pcpraxis-logo.gif"