VN-Menü - Ansicht der VN-Lightbox Einstellungen
Eine Lightbox für jede Seite und jedes Bild
Vielen Dank an Volker Niederastroth für diese großartige Lightbox, die man in jedem Mobirise-Projekt verwenden kann.
VN-Lightbox ist eine Lightbox, die man als .mbrext-Erweiterung ganz einfach in Mobirise importieren kann.
Keiner der auf dieser Seite verwendeten Blöcke verfügt über eine Mobirise‑Lightbox; alle werden stattdessen von der neuen VN‑Lightbox ergänzt. In der Lightbox lassen sich die Bilder zusätzlich mit dem Mausrad vergrößern.
Die Anwendung "VN-Lightbox" findet ihr in der „VN-Block-Galerie“ unter der Rubik "VN Tools". Ich verwende hier die Version vom 20.08.2026.
Mit dieser Version wird automatisch das „VN‑Menü“ angelegt, über das ihr neue VN-Erweiterungen in einem zusätzlichen Menü verwalten könnt. Das spart Platz im Mobirise‑Site‑Menü; die Erweiterung müsst ihr jedoch weiterhin dort aktivieren oder deaktivieren.
Wenn die Anwendung über den Schalter im Site-Menü von Mobirise aktiviert wird, wird am Ende einer jeden Webseite des Projektes ein Link zur JavaScript-Datei "vn-lightbox.js" der Lightbox gesetzt.
Diese Datei sowie die zugehörige CSS-Datei werden in dieses Verzeichnis veröffentlicht:
/assets/vn-lightbox/vn-lightbox.js
Die vielfältigen Optionen sind selbsterklärend und gelten projektbezogen; sie müssen daher für jedes Projekt separat konfiguriert werden. Außerdem können Seiten, Blöcke oder einzelne Bilder von der Lightbox ausgeschlossen werden.
Den Button mit den Sternchen ✨️ könnt ihr unter „Knopf anpassen“ als „Schwebend“ einstellen. Dann lässt er sich verschieben — bei mir befindet er sich unten rechts über dem „Pinsel“ Button von Mobirise. Außerdem könnt ihr den Button auf allen Seiten (z. B. „Erweiterungen“ oder „Sites“) komplett ausblenden, indem ihr im Menü „Hier ausblenden“ auswählt. Der ursprüngliche Button des „VN‑Menüs“ (oben rechts) verschwindet nach einem Neustart von Mobirise. Seht auch den Screenshot unten.
Für eine rückstandslose Deinstallation entfernt ihr die Anwendung einfach wieder aus den Erweiterungen. Das „VN‑Menü“ wird erst automatisch gelöscht, wenn alle darin enthaltenen und bereits installierten Anwendungen entfernt wurden.
VN-Menü - Ansicht der VN-Lightbox Einstellungen
VN-Lightbox - Eigene CSS
Fortgeschrittene Benutzer können im unteren Lightbox‑Menü vorhandene CSS‑Klassen anpassen. Die betreffenden Klassen findet ihr in der CSS‑Datei im Verzeichnis:
/assets/vn-lightbox/vn-lightbox.css
Im Folgenden mein aktuelles zusätzliches CSS, das ich im Bereich „Eigenes CSS“ eingetragen habe. Die Anwendung fügt diese Regeln anschließend am Ende derselben CSS-Datei „vn-lightbox.css“ ein und überschreibt damit gegebenenfalls bestehende Anweisungen:
.vn-lb-stage {
/* Cursor umgesetzt */
cursor: ns-resize;
/* Abstand grosse Fotos oben unten von 20px */
inset: 20px 0;
}
.vn-zoom-aktiv {
/* Cursor umgesetzt */
cursor: pointer;
}
.vn-lb-bar {
/* Beschriftung Fotos fett */
font-weight: bold;
}
.vn-lb-img {
/* Fotos mit 20px Rundung in Lightbox */
border-radius: 20px;
}
Bitte überschreibt diese Regeln nur an dieser Stelle und nicht direkt in der CSS‑Datei, da dies zu Funktionsstörungen der Lightbox führen kann.
VN-Lightbox - Eigene CSS
Im VN-Menü werden verschiedene Anwendungen von Volker Niederastroth automatisch gespeichert wenn ihr diese in Mobirise importiert. Hier habe ich lediglich bisher die VN-Lightbox im Menü.
Das Menü lässt sich vielfältig anpassen, am besten ihr probiert das alles ein wenig aus.
Den Button mit den Sternchen könnt ihr unter "Knopf anpassen" als "Schwebend" deklarieren. Dann ist dieser verschiebbar, ich habe ihn unten rechts über dem Button "Pinsel" von Mobirise. Weiterhin könnt ihr auf allen Seiten, wie "Erweiterungen" oder "Sites" den Button ganz ausblenden, indem ihr im Menü auf "Hier ausblenden" klickt.
Der ursprüngliche Button vom "VN Menü" (ober rechts) verschwindet dann nach einem Neustart von Mobirise.
PORTFOLIO SHOWCASE
Explore a curated selection of visual projects showcasing creativity.
NATURE
URBAN
PORTRAIT
ARCHITECTURE
TRAVEL
MINIMAL
ABSTRACT
EVENTS
