online slideshow mit stets wechselnden Bilder

[oktave]

Hallo miteinander
ich möchte gerne die Bilder meiner Wetterwebcam über einen gewissen Zeitraum (wenn möglich mit Datumswahl) als Slideshow auf der Webcamseite anbieten.
Die Bilder werden alle 5 Minuten umbenannt bzw umnummeriert und das neueste Bild hat immer die Nummer *.000(xx).jpg
Leider bin ich auf der Suche nach einem geeigneten Tool oder code nicht fündig geworden. (Mit Ausnahme von bezahlbaren Abos wie: multipixx)
Hat vielleicht Einer von Euch einen Tip dazu?
Vielen Dank für Eure Hilfe

 

[msi]

Hat vielleicht Einer von Euch einen Tip dazu?

Das sollte mit PHP möglich sein. Das Verzeichnis mit der Funktion glob scannen und dann die ersten Bilder für die Slideshow verwenden.

 

[oktave]

Das sollte mit PHP möglich sein. Das Verzeichnis mit der Funktion glob scannen und dann die ersten Bilder für die Slideshow verwenden.

Vielen Dank msi für deine prompte Antwort. Da ich ein HTML Laie bin, habe ich keine Ahnung von PHP und auch nicht, wie man eine Slideshow macht.

 

[msi]

Beispiele für Slideshows: https://www.w3schools.com/w3css/w3css_slideshow.asp

Kannst du denn auf deinem Webspace PHP ausführen?

 

[Oliver77]

Wenn der Bild-Pfad immer der Gleiche ist, müsste das gehen:

<div id="wrap">
<img id="pic" src="img/1.jpg" alt="Webcam">
</div>

const path = "img/1.jpg";
const myInterval = setInterval(myTimer, (1000*60*5));
function myTimer() {
document.getElementById("pic").remove();
const pic = document.createElement("img");
pic.src = path;
pic.id = "pic";
document.getElementById("wrap").appendChild(pic);
}
function myStopFunction() {
  clearInterval(myInterval);
}

1000*60*5 sind 5 Minuten, zum Testen kann man den Wert runterschrauben.

 

[Oliver77]

So schien es nicht zu gehen!

 const path = "img/1.jpg";
 const myInterval = setInterval(myTimer, (1000*5*60));

function myTimer() {
  document.getElementById("pic").src = path;
}

Hab mal das Script gestartet und die Datei umbenannt zur gleichen Adresse.
Hat es nicht aktualisiert, oben das Script ging fast, hat sich merkwürdig verhalten.

 

[oktave]

Beispiele für Slideshows: https://www.w3schools.com/w3css/w3css_slideshow.asp

Kannst du denn auf deinem Webspace PHP ausführen?

Daran kann es nicht scheitern. Der Provider ist immer auf dem neuesten Stand.

 

[oktave]

So schien es nicht zu gehen!

 const path = "img/1.jpg";
 const myInterval = setInterval(myTimer, (1000*5*60));

function myTimer() {
  document.getElementById("pic").src = path;
}

Hab mal das Script gestartet und die Datei umbenannt zur gleichen Adresse.
Hat es nicht aktualisiert, oben das Script ging fast, hat sich merkwürdig verhalten.

Danke Oliver77 für deine Bemühungen. Werde damit auch etwas tüfteln.

 

[Sclero2004]

Hallo @oktave
Bist Du mit deinem Vorhaben schon weiter gekommen? Auf deiner Wettercam sehe ich noch nichts von einer Slideshow.

 

[oktave]

Hallo @oktave
Bist Du mit deinem Vorhaben schon weiter gekommen? Auf deiner Wettercam sehe ich noch nichts von einer Slideshow.

Ola, leider nein. Es fehlt an Zeit und Lust.

 

[Sclero2004]

Das ist schade. Eine Slideshow ist zwar eine Aufgabe, die häufig vorkommt aber deine Randbedingungen sind schon etwas anders und es wäre eine interessante Aufgabe, das zu realisieren.

 

[msi]

@Sclero2004
Siehe Posting #2, mit PHP sollte das eigentlich kein großes Problem sein.

 

[Sclero2004]

Schon, das ist das Standardverfahren und auf der Serverseite ist das auch zu empfehlen. Die Besonderheit, an die ich dachte, ist die Tatsache, dass die Bilddateien so nummeriert werden, dass die Dateinamen immer so neu nummeriert werden, dass das neueste Bild immer die Nummer xxx000xx.jpg hat. D. h. die Namen sind immer gleich.
Ich verwende für eine solche Aufgabe gern Swiper:

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

Anders als die einfachen Beispiele, die man bei w3schools findet, unterstützt dieser auch Weiterschalten durch Wischen und hat einen Mutation-Observer, d. h. man kann "unter den Füßen" das HTML erneuern und er aktualisiert ohne neu initialisiert werden zu müssen.

 

[msi]

Die Besonderheit, an die ich dachte, ist die Tatsache, dass die Bilddateien so nummeriert werden, dass die Dateinamen immer so neu nummeriert werden

Wenn man den Dateinamen nicht beachtet, sondern nach der Erstellungszeit geht, sollte auch das kein Problem sein.

 

[Sclero2004]

Selbstverständlich, das geht dann aber über das einfache Verfahren mit glob hinaus. Muss man natürlich tun, wenn man nach Zeitintervallen filtern will, wie @oktave sich das wünscht.

 

[msi]

das geht dann aber über das einfache Verfahren mit glob hinaus

Wobei ich nicht glaube, dass das überhaupt nötig ist. Normalerweise liefern Webcam Bilder, die man einfach sortiert bekommt und nicht über die Erstellungszeit gehen muss.