JoomION FlipMe

Anleitung · Zeigt Bilder und PDFs als blätterbares Flipbook im Frontend an und verwaltet Bilder, PDFs und Styles im Backend (Joomla 5/6)

1. Überblick

Mit JoomION FlipMe zeigst du Bildserien und PDF-Dokumente auf deiner Website als blätterbares Buch – mit Seitenumblätter-Animation, Tastatursteuerung und Vollbild. Das Paket installiert zwei Bausteine:

Komponente „FlipMe" (Backend): Verwaltung von Bildern (in Ordnern), PDFs und Style-Sets (Farbschemata) mit Live-Vorschau.
Modul „FlipMe" (Frontend): zeigt einen Bildordner oder eine PDF-Datei als Flipbook bzw. als eingebettete Dateiansicht an.

Die Dateien liegen unter images/FlipMe/Bilder/<Ordner>/ und images/FlipMe/PDFs/.

2. Installation

Paket pkg_flipme-X.zip über System → Installieren → Erweiterungen hochladen – Komponente und Modul werden in einem Schritt installiert.
Die Verwaltung öffnest du unter Komponenten → FlipMe. Es erscheint zuerst das Dashboard.
Unter Inhalt → Site-Module → Neu ein Modul „FlipMe" anlegen, Quelle und Style wählen, Position zuweisen und veröffentlichen (siehe Abschnitt 7).

Im Bereich Hilfe der Komponente steht eine ausführliche Übersicht (Schnellstart, Parameter-Referenz, Funktionsreferenz) zweisprachig (DE/EN) direkt im Backend bereit.

Der Bereich „Hilfe & Dokumentation" – Deutsch

Der Bereich „Hilfe & Dokumentation" – auf Englisch umgeschaltet

3. Dashboard

Das Dashboard ist die Startseite der Komponente. Vier Kacheln zeigen in Echtzeit die Anzahl der Ordner und Bilder, PDF-Dateien und Style-Sets; ein Klick öffnet den jeweiligen Bereich. Die Info-Zeile unten nennt die Speicherpfade und erinnert daran, das Modul im Frontend einzubinden.

Dashboard mit den Kacheln Bilder, PDFs, Styles und Hilfe

4. Bilder verwalten

Unter Bilder legst du Ordner an und lädst Fotos hoch. Jeder Ordner wird später im Modul als eigenes Flipbook auswählbar.

Ordner anlegen: Namen eingeben und auf „+ Anlegen" klicken (oder Enter). Erlaubt sind Buchstaben, Zahlen, Bindestrich, Punkt und Leerzeichen.
Ordner wählen: Ein Klick auf den Ordner öffnet die Upload-Box und die Bildübersicht.
Hochladen: Bilder per Drag & Drop in die grüne Fläche ziehen oder über „Dateien auswählen" (Mehrfachauswahl). Ein Fortschrittsbalken zeigt Datei und Prozent.
Reihenfolge: Thumbnail am Griff ⠿ packen und an die neue Position ziehen – wird automatisch gespeichert und bestimmt die Seitenfolge im Flipbook.

Lightbox: die Lupe öffnet das Bild groß, Navigation mit ← → oder Buttons, schließen mit Esc.
Löschen/Verschieben: einzeln über den Papierkorb im Bild-Overlay oder mehrere per Checkbox, dann „Löschen" bzw. „Verschieben" in einen anderen Ordner.
Ordner löschen: ✕ neben dem Ordnernamen – löscht den Ordner mit allen Bildern unwiderruflich.
Formate: JPG, JPEG, PNG, GIF, WebP (geprüft per MIME-Typ).

Bilder-Verwaltung: Ordner anlegen, Ordner wählen, Bilder hochladen

Verwende innerhalb eines Ordners möglichst einheitliche Bildformate (gleiches Seitenverhältnis). Das Flipbook nutzt eine Seitengröße für das ganze Buch – abweichende Bilder erhalten sonst Ränder innerhalb ihrer Seite.

5. PDFs verwalten

Unter PDFs lädst du PDF-Dateien hoch, die das Modul als Blätterbuch oder Dateiansicht zeigt.

Hochladen: PDF in die orange Drop-Zone ziehen oder „PDF auswählen" klicken; mehrere Dateien gleichzeitig sind möglich.
Vorschau: der Button „Vorschau" öffnet die PDF in einer Lightbox im Browser.
Löschen: einzeln über den roten Papierkorb oder mehrere per Checkbox bzw. „Alle" + „Löschen".
Dateigröße: begrenzt durch die PHP-Einstellung upload_max_filesize deines Servers.

PDF-Verwaltung mit Drop-Zone und Liste der vorhandenen PDFs

6. Styles (Farbschemata)

Ein Style-Set legt das Aussehen des Flipbooks fest. Nach der Installation gibt es den geschützten Style „Standard (Hell)". Die Live-Vorschau zeigt jedes Farbschema sofort als aufgeschlagenes Buch.

Style-Verwaltung: Liste der Style-Sets und Live-Vorschau

Mit „+ Neuen Style anlegen" oder „Bearbeiten" öffnet sich rechts der Editor. Einstellbar sind:

Bereich	Einstellungen
Hintergrund-Verlauf	Start- und Endfarbe der Bühne
Cover-Seite	Hintergrund- und Textfarbe
Buchseiten	Hintergrund- und Textfarbe
Steuerbuttons	Hintergrund, Text, Hover-Farbe
Steuertext	Textfarbe und Schriftgröße der Seitenanzeige zwischen den Pfeilen
Schatten & Schrift	Schattenfarbe, Deckkraft (0–1), Schriftgröße
Pfeile & Animation	Pfeilart (10 Varianten), Pfeilgröße, Blätterzeit (200–3000 ms), Steuerung anzeigen ja/nein

Style-Editor mit allen Farb- und Animationseinstellungen

Jede Farbe hat einen Farbwähler und ein Hex-Feld (synchronisiert); Änderungen erscheinen sofort in der Vorschau.
Als Standard setzen: dieser Style gilt für alle Module ohne eigene Style-Auswahl.
Löschen: nur für nicht geschützte Styles; der Standard-Style kann nicht gelöscht werden.

7. Modul einrichten

Lege unter Inhalt → Site-Module → Neu ein Modul vom Typ FlipMe an. Im Tab Modul wählst du die Quelle:

Feld	Bedeutung
Quelltyp	Bilder-Ordner oder PDF-Datei
Bildordner	Ordner unter `images/FlipMe/Bilder/` (Auswahlliste, nur bei Bilder-Ordner)
PDF-Anzeigemodus	Dateiansicht (komplette PDF im Browser-Viewer, von oben nach unten) oder Blätterbuch (jede Seite mit Umblätter-Effekt)
PDF-Dateiname	PDF unter `images/FlipMe/PDFs/` (Auswahlliste, nur bei PDF-Datei)
Style-Set ID	gewünschtes Farbschema; Standard = Standard-Style verwenden

Modul mit Quelltyp „Bilder-Ordner": Bildordner und Style-Set wählen

Modul mit Quelltyp „PDF-Datei": Anzeigemodus, PDF-Datei und Style-Set

Tab „Darstellung"

Feld	Bedeutung
Breite	`800px` = feste Breite · `100%` = Anteil der Modulbreite (Höhe folgt dem Seitenverhältnis) · leer = native Dateibreite (max. Modulbreite)
Höhe	`600px` = feste Höhe · `70%` = Anteil der Bildschirmhöhe (Breite folgt dem Seitenverhältnis) · leer = automatisch aus Breite und Dateiverhältnis
Titelleiste anzeigen	blendet den Modultitel über dem Flipbook ein
PDF-Render-Skalierung	Schärfe beim PDF-Blätterbuch: 1.0 = normal, 1.5 = schärfer (Standard), 2.0 = sehr scharf (0.5–4.0)

Bleiben Breite und Höhe leer, richtet sich das Flipbook nach der Dateigröße. Werden beide in px gesetzt, entsteht eine feste Box. Sehr breite Doppelseiten werden auf die Modulbreite begrenzt.

8. Bedienung im Frontend

Bilder-Flipbook: zeigt die Bilder des Ordners als Buch; Seitenecke ziehen oder die Pfeil-Buttons nutzen.
PDF-Blätterbuch: jede PDF-Seite wird per PDF.js als Bild gerendert und mit derselben Umblätter-Animation angezeigt.
PDF-Dateiansicht: die PDF wird direkt eingebettet und kann durchgescrollt werden.
Tastatur: ← → blättern, Pos1/Ende springen zur ersten/letzten Seite.
Vollbild: der Vollbild-Button vergrößert das Flipbook auf den ganzen Bildschirm.

9. Datenschutz

FlipMe speichert keine IP-Adressen, keine Sitzungsdaten und keine personenbezogenen Daten der Besucher. Für die Flipbook-Darstellung lädt das Modul die Bibliotheken StPageFlip (cdn.jsdelivr.net) und – beim PDF-Blätterbuch – PDF.js (cdnjs.cloudflare.com) aus einem CDN; dabei wird die IP-Adresse des Besuchers an den CDN-Anbieter übertragen. Bitte in der Datenschutzerklärung berücksichtigen.

10. Sicherheit

Die Erweiterung enthält keinen Schadcode: _JEXEC-Schutz in allen Dateien, namespaced Joomla-5/6-API, gebundene Datenbankparameter (keine SQL-Injection möglich). Backend-Aktionen nur mit CSRF-Token und Recht core.manage. Uploads werden per MIME-Prüfung und Endungs-Whitelist kontrolliert, PDFs zusätzlich per Signatur %PDF-; alle Pfade laufen über eine realpath()-Prüfung, und eine .htaccess in den Upload-Ordnern sperrt die Skriptausführung.

11. Lizenz, Updates & Spenden

Freie Software (GPL v2+). Das Paket ist kostenlos und benötigt keinen Lizenzschlüssel und keine Registrierung. Keine Update-Garantie, kein garantierter Support – Nutzung auf eigene Gefahr. Support-Anfragen gerne an Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein..

Updates kommen ganz normal über den nativen Joomla-Updater (System → Aktualisierungen → Erweiterungen) – ohne Lizenzprüfung.

Wenn dir die Erweiterung hilft, freue ich mich über eine freiwillige Spende auf joomion.de. Danke!

FAQs als PDF Deutsch | English