Zeitlich wechselndes Foto im Header

[scherenschlag]

Moin.
Da habe ich ja mal wieder eine ganz tolle Idee....
Ich habe meinem Wirt folgenden Vorschlag gemacht:
Für jeden Advent(stag) baue ich dir ein neues Bild mit Grüßen aus der Sonne ein. (So heißt die Kneipe )
Gleiches Motiv. Andere Farbe. Wie auch immer. Bis dahin ja kein Problem.
Doch halt. Ich fahre nach dem 2. Advent in den Urlaub. Und nehme kein Laptop mit!
Deshalb die Frage:
Gibt es eine Möglichkeit, sagen wir mal eine Zeitsteuerung, verschiedene Bilder zu den entsprechenden Zeiten automatisch einzufügen? Also Bild 1 und 2 mache ich noch händisch. Bild 3 und 4 sollen dann automatisch eingefügt werden. Dann komt ja auch noch Heiligabend....
Glaube nicht das Mobirise das mit sich bringt. Habe auf jeden Fall nichts gefunden.
Andere Möglichkeit? Geht so etwas überhaupt?

[Tommy Herrmann]

Moin,

also - unser Werner Zenk hatte mal so ein Skript entwickelt, also nicht nach Wochentagen, sondern nach Stunden am Tag.

https://www.mobirise-tutorials.com/Tuto ... ilder.html

Ich habe leider im Moment keine Zeit das umzuschreiben, vielleicht hast Du diese oder hast jemanden der Dir das macht.

[scherenschlag]

Ah. Doch. Scheint zu gehen.
Das werde ich mir mal in aller Gemütsruhe anschauen.
Danke erstmal.

[Tommy Herrmann]

… also so müsste das JavaScript dann für unterschiedliche Tagesdaten aussehen (als Beispiel) - das aber bisher ungeprüft:

Code: Alles auswählen

<!-- Skript Wechselbilder -->
<script>
 let heute = new Date();
 let tag = heute.getDate();
 let monat = heute.getMonth() + 1; // Monate sind 0-basiert in JavaScript
 let jahr = heute.getFullYear();
 let bild = `images/standard.jpg`; // Standardbild für andere Daten

 // Spezifische Bilder für bestimmte Tagesdaten
 if (tag === 1 && monat === 11 && jahr === 2024) bild = `images/bild1.jpg`;
 if (tag === 10 && monat === 11 && jahr === 2024) bild = `images/bild2.jpg`;
 if (tag === 15 && monat === 11 && jahr === 2024) bild = `images/bild3.jpg`;
 if (tag === 24 && monat === 12 && jahr === 2024) bild = `images/bild4.jpg`;

 document.getElementById("bild").style = `background-image: url(${bild})`;
</script>

[scherenschlag]

[Tommy Herrmann]

Ein Skript für die Wechselbilder nach jährlich wiederkehrenden Tagesdaten steht jetzt auch noch als Alternative auf meiner Tutorialseite - Seite bitte neu laden ↻

https://www.mobirise-tutorials.com/Tuto ... ilder.html

Denke auch daran, dass Du sämtliche im Skript angegebenen Bilder, natürlich zuvor in das von mir gegründete Verzeichnis:

/images/

das im Stammverzeichnis des Projektes liegt, kopieren musst. Also lokal in das Verzeichnis der lokalen Publizierung und auch mit Deinem FTP-Programm in das gleiche Verzeichnis am Server, das Du auch dort zunächst anlegen musst.

Entweder benennst Du Deine Bilder dann so wie im Skript angegeben oder Du trägst die Namen Deiner Bilder in das Skript ein. Achte dabei auch auf Groß- und Kleinschreibung, denn die Bildnamen (Dateinamen) müssen der Bezeichnung im Skript entsprechen. Keine Leerzeichen - keine Sonderzeichen oder Umlaute bitte!

[Tommy Herrmann]

… und noch ein Skript entwickelt - mit Wechsel zu den vier Jahreszeiten.

Frühling: 21. März bis 20. Juni
Sommer: 21. Juni bis 22. September
Herbst: 23. September bis 20. Dezember
Winter: 21. Dezember bis 20. März des folgenden Jahres

https://www.mobirise-tutorials.com/Tuto ... aison.html

[scherenschlag]

Ich habe alles mal eingefügt nach deinen Vorgaben.
Erstaunlicherweise scheine ich das bis dahin richtig gemacht zu haben. Kein Error. Bis jetzt.
Frage.
Um das mal zu testen, wären dann meine Eingaben im Script korrekt?
Jahreszeiten wären ein bisschen zu lang ......

Code: Alles auswählen

<script>
  let heute = new Date();
  let stunde = heute.getHours();
  let bild = `images/foto2024a.jpg`;
  if (minute>= 1 && minute<= 14) bild = `images/foto2024a.jpg`;
  if (minute>= 15 && minute<= 29) bild = `images/foto2024b.jpg`;
  if (minute>= 30 && stunde <= 44) bild = `images/foto2024c.jpg`;
  if (stunde >= 45 && stunde <= 60) bild = `images/foto2024d.jpg`;
  document.getElementById("bild").style = `background-image: url(${bild})`;
</script>

[Tommy Herrmann]

habe gerade noch nicht einmal die Zeit zu gucken.

Teste doch einfach - da kann doch nichts - aber auch gar nichts - passieren ...

Das kannst Du doch auch mit einer lokalen Publizierung testen, wenn die Bilder auch zusätzlich im lokalen Verzeichnis liegen.

[scherenschlag]

let minute = heute.getMinutes();

Müsste dann wahrscheinlich so heißen. Oder?

[scherenschlag]

Ah. Du warst schneller. Mache ich mal ...
Danke.

[Tommy Herrmann]

Ja, die Variable (let) minuten muss natürlich erst gegründet werden.

Hier ist das angepasste Skript, das innerhalb jeder Stunde alle 15 Minuten zwischen vier verschiedenen Bildern wechselt.

Du musst die Seite im Browser natürlich auch alle 15 Minuten aktualisieren, um die Tests durchzuführen ↻

Code: Alles auswählen

<!-- Skript Wechselbilder -->
<script>
 let heute = new Date();
 let stunde = heute.getHours();
 let minuten = heute.getMinutes();
 let bild = `images/standard.jpg`; // Standardbild, falls nichts passt

 // Auswahl des Bildes basierend auf der aktuellen Viertelstunde
 if (minuten >= 0 && minuten < 15) bild = `images/bild1.jpg`;
 else if (minuten >= 15 && minuten < 30) bild = `images/bild2.jpg`;
 else if (minuten >= 30 && minuten < 45) bild = `images/bild3.jpg`;
 else if (minuten >= 45 && minuten < 60) bild = `images/bild4.jpg`;

 document.getElementById("bild").style = `background-image: url(${bild})`;
</script>

Erklärung

Viertelstunden-Intervalle: Das Skript prüft, in welchem 15-Minuten-Intervall (0–14, 15–29, 30–44, 45–59) sich die aktuelle Minute befindet und zeigt das entsprechende Bild (bild1.jpg bis bild4.jpg) an.

Bildwechsel jede Stunde: Jede Stunde beginnt die Sequenz von vorne, sodass bild1.jpg zu jeder vollen Stunde (z.B., 10:00, 11:00) angezeigt wird.

Mit diesem Aufbau wird das Bild innerhalb jeder Stunde alle 15 Minuten gewechselt.