Ein einfacher Adventskalender für die Webseite der speziell für die Verwendung im CMS des LFV-Website-Kits 2.0 entwickelt wurde, das auf Django CMS basiert. Er nutzt Bootstrap 4.6.0, entsprechend der Version, die im LFV-Website-Kit verwendet wird. Die Anzeige ist voll responsiv, d.h. vor allem auch für kleinere Endgeäte optimiert.
- Türchen lassen sich beliebig anordnen (einfach "umkopieren")
- Bilder lassen sich in modalem Popup in Originalgröße öffnen
- Zoom Effekt der Türchen beim darüberfahren mit der Maus
- Klickt man auf eine Tür, die noch nicht geöffnet werden kann, erscheint ein entsprechender Hinweis
- Die Tür des aktuellen Tages muss angeklickt werden, damit sich geöffnet wird
Eine detaillierte Anleitung, wie ihr den Kalender beziehungsweise die einzelnen Skripte in eure Webseite integrieren könnt, die auf dem LFV-Website-Kit basiert, findet ihr hier: https://www.feuerwehr-gruenwald.de/adventskalender/. Dort sind die Code-Snippets auch schon entsprechend vorbereitet.
Den Kalender als WordPress-Plugin findet ihr in diesem Github-Projekt: ffg_adventskalender_wordpress
Einfacher geht's Standalone: Checkt das Projekt aus und öffnet anschließend die adventskalender.html. Die adventskalender_konfigurator.html enthält einige zusätzliche JavaScript Methoden und eine UI, mit der sich verschiedene Einstellungen des Kalenders testen lassen. So kann der aktuelle Monat per Checkbox auf Dezember geändert werden, damit sich die Änderungen bzw. Anpassungsmöglichkeiten testen lassen.
Die Hauptarbeit steckt in der adventskalenderdaten.js. Diese enthält zu jedem Tag im Adventskalender die ensprechenden Angaben zum Bild:
"1": {
"image": "/bilder/bild_tuer_1.jpg",
"text": "Bildbeschreibung <strong>kann HTML enthalten</strong>",
"link": "https://github.com"
}
| Schlüssel | Beschreibung |
|---|---|
1 .. 24 |
Leitet das Array für jeden einzelnen Tag des Kalenders ein. |
image |
Enhält die Angabe des Bildes, welches hinter der Tür angezeigt werden soll. Entweder als relative oder absolute Pfadangabe. Bei absoluter Pfadangabe kann zur Erleichterung auch noch der Parameter basePath genutzt werden um nicht 24 Mal die gleichen Pfade einzugeben. |
text |
Die Beschreibung, die im Popup unter dem Bild angezeigt werden soll. Kann HTML-Tags enthalten. |
link |
Eine URL zu weiteren Informationen. Ist ein link angegeben, wird automatisch ein Button unter dem text angezeigt, der die URL in einem neuen Fenster öffnet. Die Angabe des Button-Labels erfolgt in der adventskalender.js. |
In der Datei adventskalender.js gibt es noch die folgenden Anpassungsmöglichkeiten, um das Aussehen des Kalenders zu steuern:
| Schlüssel | Wert | Beschreibung |
|---|---|---|
showModalForPastDoors |
true oder false |
Steuert, ob das Popup für vergangene Türchen angezeigt werden soll. Wenn der Wert auf false steht, passiert bei einem Klick auf das Türchen nichts. |
showImagesForPastDoors |
true oder false |
Steuert, ob Bilder für vergangene Türchen mit 40% Deckkraft hinter den Türchen sichtbar sind. |
backgroundImageUrlLarge |
URL | URL des Hintergrundbilds für große Bildschirme. |
backgroundImageUrlSmall |
URL | URL des Hintergrundbilds für kleine Bildschirme (mobile Endgeräte). |
labelPopupModelLink |
Text | Label für den Button im Popup. |
headerPopupNotTime |
Text | Text in Überschrift im Popup wenn Tür noch nicht geöffnet werden kann. |
Anzeige des Kalenders mit Defaulteinstellungen auf Desktopbildschirmen:
Anzeige des Kalenders mit Defaulteinstellungen auf mobilen Endgeräten:
