⚡ Features im Überblick
🖼️
Bilder-Upload
Drag & Drop, Mehrfachauswahl, JPG/PNG/WebP bis 10 MB
📁
Kategorien
Beliebig viele, sortierbar, A-Z oder Z-A
🔀
Drag & Drop
Reihenfolge der Bilder per Ziehen ändern
🌅
Lightbox
Fade, Slide, Zoom – mit Swipe auf Handy
🎨
Live-Vorschau
Dummy-Cards im Editor – Styling ohne Publish
📊
Paginierung
Einstellbare Bilder pro Seite
🔍
Kategorie-Filter
Alle-Button optional, Start-Kategorie wählbar
🔐
Sicherer Login
bcrypt-Passwort, Session-basiert
📦 Installation
1
Extension installierenMobirise öffnen → Extensions → vn-gallery.mbrext per Drag & Drop installieren
2
Block auf die Seite ziehenIn der Block-Bibliothek unter Content → VN Gallery den Block auf die Seite ziehen
3
Galerie-ID vergebenIm Zahnrad unter Galerie-ID einen eindeutigen Namen eingeben, z.B. galerie-1
4
Seite publishenErst nach dem Publish ist gallery.php auf dem Server und die Galerie funktioniert
⚠️ WichtigNach jeder Neuinstallation der Extension muss die Seite neu gepublisht werden damit die PHP-Datei auf den Server übertragen wird.
🔑 Erster Start & Setup
Beim ersten Aufruf der Seite muss ein Admin-Passwort festgelegt werden:
1
Admin-Login öffnenStrg+Doppelklick auf der Seite – das Setup-Formular erscheint automatisch
2
Passwort festlegenPasswort eingeben (min. 6 Zeichen), bestätigen, auf Einrichten klicken
3
Fertig!Das Passwort wird sicher als bcrypt-Hash gespeichert – niemand kann es im Klartext lesen
📤 Bilder hochladen
1
Als Admin einloggenStrg+Doppelklick → Passwort eingeben → Anmelden
2
Upload-Bereich öffnenIn der Admin-Bar auf ↑ Hochladen klicken
3
Bilder auswählenBilder per Drag & Drop in den Upload-Bereich ziehen oder auf den Bereich klicken. Mehrfachauswahl möglich.
4
Kategorie & Beschriftung (optional)Vor dem Upload Kategorie zuweisen und Beschriftung eingeben
5
HochladenAuf Hochladen klicken – Fortschrittsanzeige erscheint
💡 TippNeue Bilder werden automatisch nach dem letzten Bild derselben Kategorie einsortiert – nicht ans Ende aller Bilder.
Beschriftung nachträglich ändern
Als Admin: auf die Beschriftung unter einem Bild klicken → Prompt erscheint → neuen Text eingeben.
📁 Kategorien verwalten
Kategorien ermöglichen das Filtern der Galerie per Klick auf Filter-Buttons.
Kategorie anlegen
1
Admin-Bar → 📁 KategorienDas Kategorien-Panel öffnet sich
2
Name eingeben → AnlegenKategoriename eingeben und auf Anlegen klicken
Bild einer Kategorie zuordnen
Als Admin: über das Bild hovern → 📁 Button klicken → Kategorie aus der Liste wählen
Sortierung
| Einstellung | Ergebnis |
|---|
| Reihenfolge wie angelegt | Kategorien in der Reihenfolge in der sie erstellt wurden |
| A → Z aufsteigend | Alphabetisch, Umlaute korrekt (de) |
| Z → A absteigend | Umgekehrt alphabetisch |
💡 JahreszahlenBei Jahreszahlen als Kategorienamen (2020, 2021, 2022...) funktioniert A→Z korrekt – älteste zuerst, neueste zuletzt.
🔀 Reihenfolge ändern (Drag & Drop)
Als Admin eingeloggt können Bilder per Drag & Drop umsortiert werden:
1
Als Admin einloggenDer Cursor wird auf den Bildern zur Hand
2
Bild anfassen und ziehenDas gezogene Bild wird transparent
3
Auf Zielbild fallen lassenGrüner Rahmen zeigt das Ziel an – die Bilder tauschen die Plätze
4
Automatisch gespeichertDie neue Reihenfolge wird sofort auf dem Server gespeichert
🌅 Lightbox
Klick auf ein Bild öffnet die Lightbox mit Vollansicht.
| Aktion | Funktion |
|---|
| ← → Pfeiltasten | Nächstes / vorheriges Bild |
| Escape | Lightbox schließen |
| Klick auf Hintergrund | Lightbox schließen |
| Wischen links/rechts | Nächstes / vorheriges Bild (Handy) |
Einblend-Effekte
| Effekt | Beschreibung |
|---|
| Einblenden (Fade) | Bild blendet sanft ein und aus |
| Schieben (Slide) | Bild gleitet von der Seite herein |
| Zoom | Bild zoomt leicht herein |
⚙️ Zahnrad-Einstellungen
Galerie
| Einstellung | Beschreibung |
|---|
| Galerie-ID | Eindeutiger Name – bei mehreren Galerien pro Seite unterschiedlich! |
| Handy Admin-Trigger | ⚙️ Button / 4x Tippen / Schütteln |
| Kategorie-Sortierung | Wie angelegt / A→Z / Z→A |
| Alle-Button anzeigen | „Alle"-Button in der Filter-Leiste |
| Beim Start alle Bilder | Galerie startet mit allen Bildern oder leer |
| Start-Kategorie | Beim Start direkt eine Kategorie anzeigen |
Layout
| Einstellung | Beschreibung |
|---|
| Full Width | Galerie über die volle Seitenbreite |
| Bildgröße (px) | Mindestbreite der Bilder (80–400px) |
| Bilder pro Seite | Anzahl Bilder pro Seite (4–48) |
| Abstand (px) | Abstand zwischen den Bildern |
Farben
| Einstellung | Beschreibung |
|---|
| Hintergrund | Hintergrundfarbe des Blocks |
| Karte | Hintergrund der Bildkacheln |
| Akzent | Aktiver Filter-Button, Hover-Effekte |
| Button-Hintergrund | Inaktive Filter-Buttons |
| Button-Textfarbe | Text der inaktiven Filter-Buttons |
Lightbox
| Einstellung | Beschreibung |
|---|
| Einblend-Effekt | Einblenden / Schieben / Zoom |
| Hintergrund-Farbe | Farbe des Lightbox-Hintergrunds |
| Hintergrund-Deckkraft | Transparenz des Hintergrunds (50–100%) |
| Hintergrund-Blur | Unschärfe des Hintergrunds (0–20px) |
| Rahmen um Bilder | Rahmen um Vorschaubilder und Lightbox-Bild |
| Rahmen-Farbe / Breite | Farbe und Stärke des Rahmens |
🔐 Admin-Zugang
Desktop
Strg + DoppelklickIrgendwo auf der Seite
Strg + Shift + ATastenkürzel als Alternative
Handy (im Zahnrad wählbar)
⚙️ ButtonKleiner grüner Button unten links – nur auf Touchgeräten sichtbar
4x TippenVier Mal schnell auf die Galerie tippen
SchüttelnHandy schütteln (HTTPS + Android empfohlen)
🔗 Text-Link für Admin
Beliebige Links oder Buttons können den Admin öffnen – z.B. im Menü oder Footer:
<!-- Einfacher Link -->
<a href="javascript:void(0)" onclick="vnAdmin()">Admin</a>
<!-- Als Button -->
<button onclick="vnAdmin()">⚙️ Galerie Admin</button>
<!-- Nur auf Handy sichtbar (Bootstrap-Klasse) -->
<div class="d-block d-md-none">
<a href="javascript:void(0)" onclick="vnAdmin()">Admin</a>
</div>
<!-- Im Mobirise Menü: URL-Feld -->
javascript:vnAdmin()
💡 Mehrere GalerienBei mehreren Galerien mit unterschiedlichen IDs – Bindestriche werden zu Unterstrichen:
galerie-1 → vnAdmin_galerie_1()
urlaub-2025 → vnAdmin_urlaub_2025()
📋 Mehrere Galerien auf einer Seite
⚠️ WichtigJede Galerie auf einer Seite muss eine eindeutige Galerie-ID haben! Gleiche IDs führen zu Konflikten – beide Galerien zeigen nichts.
| Galerie 1 | Galerie 2 |
|---|
galerie-1 | galerie-2 |
urlaub | sport |
sommer-2024 | winter-2024 |
🔑 Passwort vergessen
Das Admin-Passwort ist als bcrypt-Hash gespeichert und kann nicht wiederhergestellt werden. Zurücksetzen per FTP:
1
Per FTP verbindenMit FileZilla oder ähnlichem auf den Server verbinden
2
Datei löschenDatei assets/vn-gallery/config/[galerie-id]/pw.hash löschen
3
Seite aufrufenSetup-Formular erscheint automatisch → neues Passwort festlegen