Mit jQuery eine Background-image Slideshow erstellen

greatblock · 23.02.2023

Ich habe bisher keine einfache lösung im Netz finden können.

Mein CSS Header:


header {
  width:100%;
  float:left;
  padding: 1.5% 0% 15% 0%;
  background: url("../images/header_bg.jpg") no-repeat center;
}

Es soll eine


background: url("...")

Slideshow statt finden und die Bilder sollen sich abwechseln. Keine Buttons, kein Swipe oder Ähnliches.

Ich habe mir überlegt mit


fadeOut

und dann ein


fadeIn

Aber das kriege ich nicht hin. Ich würde mich sehr verbunden fühlen, wenn mich Jmd. dabei unterstützt.

Danke.

draupnir · 23.02.2023

ohne Javascript wird es nicht gehen. »no-repeat« bezieht sich auf Kacheln von Bildern (als Bildwiederholung des gleichen Bildes im Hintergrund oder sonst wo).

Schau mal hier: https://www.w3schools.com/w3css/w3css_slideshow.asp

Myhar · 23.02.2023

Nur als Hinweis, die von dir genannten Anforderungen sind in keinster Weise barrierefrei.

Warum muss es unbedingt mittels background-url umgesetzt werden und nicht mittels Bilder?

greatblock · 23.02.2023


background: url("...") no-repeat center;

Ist doch ein Witz oder? Man kann's auch übertrieben.

Alle meine Seiten sind und responsive. Sie müssen sich perfekt der Auflösung anpassen. Das gilt aber für alle Browser und es funktioniert.

Es tut mir leid, wenn ein Seebehinderter das Bild nicht ausdrucken oder sehen kann.

Edit: Was ist mir Javascript? Ist doch auch nicht mehr barrierfrei

draupnir · 23.02.2023

Bilder im Hintergrund sind kein Inhalt sondern Schmuck, daher ist die Frage der Barrierefreiheit aussen vor.
Javascripte sind auf fast allen Seiten enthalten und tun brav im Hintergrund ihre Arbeit.

Wer's genauer wissen oder machen will: https://www.w3.org/WAI/test-evaluate/
oder http://www.barrierefinder.de/

Im übrigen jeder Bot von Google und Co »sieht« nur Text. Je besser die Website barrierefrei ist, desto besser für das Ranking.

greatblock · 23.02.2023

Danke. Aber das habe ich alles gelernt.
Aber dann müsste ich auf jeder meiner Seiten ein Button zum Varrieren der Schriftgröße einpflegen.

Irgendwo hört der Spaß auf. Ich habe mich an einigen Theme Trends gehalten und ich glaubte ich sei auf der richtigen Seite.

Javascripte sind auf fast allen Seiten enthalten und tun brav im Hintergrund ihre Arbeit.

Da muss ich dir mal widersprechen. Aus Sicherheitsgründen deaktivieren Firmen und Agenturen Javascript.

draupnir · 23.02.2023

greatblock schrieb:
Aber dann müsste ich auf jeder meiner Seiten ein Button zum Varrieren der Schriftgröße einpflegen.

Nein, denn in jedem Webbrowser kann per Tastendruck die Schriften größer oder kleiner machen, meist mit ctrl + oder ctrl -
und wirklich Sehbehinderte haben noch ganz andere Werkzeuge (zur Verfügung).

greatblock · 23.02.2023

Stimmt. Mittlerweile kann das jeder Browser

Myhar · 06.03.2023

greatblock schrieb:
Da muss ich dir mal widersprechen. Aus Sicherheitsgründen deaktivieren Firmen und Agenturen Javascript.

Nicht dass du denkst dass ich mit dir streiten will, schließlich bin ich in einem anderen Thread auch lästig mit nachfragen :-D

Hier muss ich dir aber widersprechen, ich habe in den letzten > 10 Jahren keine einzige Firma oder Agentur gesehen die JS deaktiviert. Ganz im Gegenteil, das deaktivieren von JS im Browser wird immer schwieriger. JS kann auch sehr gut unterstützend für die Barrierefreiheit eingesetzt werden.

Das allerdings wieder etwas offtopic, gibt es noch offene Fragen zu der Slideshow an sich?

greatblock · 06.03.2023

Das ist merkwürdig. Ich kann mich noch an Phasen erinnern, wo behauptet wurde. "Aus Sicherheitsgründen wird in vielen Firmen Javascript ausgeschaltet." Grund: Hacking & Computer Abstürze. Aber wie gesagt, vllt. war das nur ein kurzer Trend.

Das allerdings wieder etwas offtopic, gibt es noch offene Fragen zu der Slideshow an sich?

Ich erlebe gerade ein CodingBurnOut. draupnir hat Recht.

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net

Ohne Javascript geht's schlecht.

Myhar · 06.03.2023

Das war Anfang 2000 eventuell noch so, aber wie gesagt in den letzten > 10 Jahren ist mir das nirgends untergekommen. Wir werden eben beide alt :-D
Das Internet verändert sich.

Deine Lösung schaut doch ganz in Ordnung aus, ist das so, wie du es dir vorgestellt hast?
Eventuell kannst du auch auf ein vorgefertiges jQuery Plugin zurückgreifen, dann musst du es nicht selbst entwickeln.

greatblock · 06.03.2023

Myhar schrieb:
Wir werden eben beide alt :-D

Ja. Es fällt mir jedoch unheimlich schwer mich damit abzufinden.

Eventuell kannst du auch auf ein vorgefertiges jQuery Plugin zurückgreifen, dann musst du es nicht selbst entwickeln.

Ich suche krampfhaft danach.

Myhar · 07.03.2023

Gerade für jQuery gibt es doch Plugins wie Sand am Meer. Hast du da schon welche in die engere Auswahl gezogen? Welche hast du schon angesehen und welche Features fehlen dir bei diesen? Dann kann man wohl besser helfen das richtige Plugin für dich zu finden.