Infobildschirm mit Bilderwechsel

  • Hallo,

    Ich versuche grade einen Infobildschirm für eine Praxis zu programmieren, da ich keine ansprechende und kostengünstie Lösung online gefunden habe.

    Ich bin schon so weit, dass ich den Bildschirm in die Bereiche aufgeteilt habe, die gleichzeitig unterschiedliche Sachen (z.B. Wetter, RSS-Feed, Bilder usw.) anzeigen sollen.

    Leider scheiter ich grade an einem Bilderwechsel. Ich wollte das über ein Javascript laufen lassen, wäre aber auch offen für andere Lösungsansetzte.

    Ich wollte halt Bilder in den Ordner der Webseite kopieren (Benannt nach Bild1.jpg, Bild2.jpg ...) und die sollten dann alle 15s. wechseln. Wichtig dabei wäre, dass die Bilder alle in dem Frame scaliert sind, sich also nicht hässlich verzerren, sondern an die Seite angepasst sind.

    Habt ihr eine Lösung?

    Danke im vorraus!

  • Für solche Bilderwechsel ist u. a. Cycle2 sehr gut geeignet:

    http://jquery.malsup.com/cycle2/

    Zitat

    Wichtig dabei wäre, dass die Bilder alle in dem Frame scaliert sind, sich also nicht hässlich verzerren, sondern an die Seite angepasst sind.

    Diese Aufgabe ist nicht ganz trivial: Es erfordert, dass alle Bilder das selbe Seitenverhältnis haben. Wenn nicht, muss man akzeptieren, dass entweder etwas abgeschnitten wird oder Leerräume bleiben. Das Einpassen kann dann mit CSS object-fit geschehen:

    https://wiki.selfhtml.org/wiki…haften/Anzeige/object-fit

  • Danke für die Antworten. Ich habe jetzt den Slide jquery genommen und eingefügt. Funktioniert auch weitestgehend.

    Für solche Bilderwechsel ist u. a. Cycle2 sehr gut geeignet:

    http://jquery.malsup.com/cycle2/

    Diese Aufgabe ist nicht ganz trivial: Es erfordert, dass alle Bilder das selbe Seitenverhältnis haben. Wenn nicht, muss man akzeptieren, dass entweder etwas abgeschnitten wird oder Leerräume bleiben. Das Einpassen kann dann mit CSS object-fit geschehen:

    https://wiki.selfhtml.org/wiki…haften/Anzeige/object-fit


    Probleme die ich noch habe:

    - Das Bild ist noch nicht an die Größe angepasst.

    Wo muss ich das mit Object-Fit hinschreiben? In eine CSS Datei? Und wie verlinke ich die dann? (Sorry bin noch ein ziemlicher Anfänger...)

    - Wie kann ich die Slider so anpassen, dass ich einfach die Bilder eines Ordners nehmen kann, ohne dass ich die Bilder benennen muss?


    Danke für die Hilfe!