Gifs (ohne Endlosschleife erstellt) erneut abspielen

[anma]

Hallo, ich bin Anfänger in Sachen html und arbeite an meiner ersten Website. Ich habe dort einen Slider eingebaut, der bei Anklicken der Sliderpfeile zwischen verschiedenen gifs wechselt, welche so erstellt wurden, dass sie nur ein Mal durchlaufen. Beim Erstellen des Slider habe ich auch ein wenig mit Javascript gearbeitet. Beim klicken auf die Sliderpfeile öffnet sich keine neue Seite. Es erscheint lediglich ein neues Gif.

Nun ergibt sich das Problem, dass die Gifs nicht wieder abgespielt werden, wenn man im Slider auf bereits abgelaufene gifs geht.

Gibt es eine Mögichkeit, dass diese erneut geladen werden können? Geht das ohne Javascript? Denn da bin ich schnell überfordert.

Grüße

PS: Hier ein Ausschnitt aus meinem Code, der den Slider darstellt:

  <div style="display: inline-block; vertical-align: middle;">
	  <img src="images/arrow-left.png" class="arrow-left" onclick="plusDivs(-1)">
		<img src="images/arrow-right.png" class="arrow-right" onclick="plusDivs(1)">
		<div>
		  <img class="slides" src="images/ladenbummler.gif" onclick="plusDivs(1)">
		  <img class="slides" src="images/weltenbummler.gif">
		  <img class="slides" src="images/einkaeufer.gif">
	  	<img class="slides" src="images/verkaeufer.gif">
	  	<img class="slides" src="images/selbstfahrer.gif">
		</div>
	</div> 

[Gunnar Bittersmann]

@@anma

	  <img src="images/arrow-left.png" class="arrow-left" onclick="plusDivs(-1)">
		<img src="images/arrow-right.png" class="arrow-right" onclick="plusDivs(1)">

Das funktioniert nicht. Aus zwei Gründen:

1. Mit Tastatur können keine Bilder „angeclickt“ werden. Du musst die Bilder in button-Elemente tun und denen das onclick geben.

   Noch besser wäre es, im HTML kein onclick zu haben, sondern im JavaScript Eventhandler mit addEventListener() zu registrieren.

2. Außerdem muss jedes img ein alt-Attribut mit Alternativtext haben, der angezeigt (bzw. vorgelesen) wird, wenn das Bild nicht verfügbar ist.

	  <button onclick="plusDivs(-1)"><img src="images/arrow-left.png" alt="voriges Bild" class="arrow-left"></button>
		<button onclick="plusDivs(1)"><img src="images/arrow-right.png" alt="nächstes Bild" class="arrow-right"></button>

Per CSS kannst du dann bei den Buttons border und background entfernen.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Du musst die Bilder in button-Elemente tun und denen das onclick geben.

Schreibt’s und vergisst das zu tun. Jetzt berichtigt.

LLAP 🖖

[Klawischnigg]

Hi there,

Gibt es eine Mögichkeit, dass diese erneut geladen werden können? Geht das ohne Javascript? Denn da bin ich schnell überfordert.

Ohne Javascript geht's nicht, und die Frage ist, ob der Browser die Animation überhaupt noch einmal neu startet, wenn Du das gleiche Gif noch einmal lädst. Wenn Du das sauber lösen willst, wirst Du vermutlich um eine javascript-gesteuerte Animation nicht herumkommen…

[marctrix]

Hej Klawischnigg,

Wenn Du das sauber lösen willst, wirst Du vermutlich um eine javascript-gesteuerte Animation nicht herumkommen…

Kommt auf das gewünschte Ergebnis an. Vielleicht reichen auch css-Animationen oder animierte svgs — ohne Details ist das eh nur rumgestocher im Dustern

Marc

[anma]

Guten Morgen,

schon mal danke für die Tipps. Meine Animationen habe ich mit Aftereffects erstellt und dann als Gifs abgespeichert. Ich möchte, dass die bereits durchlaufenen Animationen, die ich im Slider habe, erneut gestartet werden, wenn man sie mittels Slider wieder aufruft.

Wenn ich das richtig verstehe, muss also das Gif immer wieder neu vom Browser abgerufen werden? Und wäre dann "no-chache" etwas?

Grüße

[marctrix]

Hej anma,

Wenn ich das richtig verstehe, muss also das Gif immer wieder neu vom Browser abgerufen werden? Und wäre dann "no-chache" etwas?

Nein, es wird ja bereits beim Aufruf der Seite geladen. Ob es dann in den Cache übernommen wird oder nicht, spielt in Deinem Fall keine Rolle.

Sorry, auch von mir keine Idee zur Lösung.

Marc

[klawischnigg]

Hi there,

Ich möchte, dass die bereits durchlaufenen Animationen, die ich im Slider habe, erneut gestartet werden, wenn man sie mittels Slider wieder aufruft.

Ja, das haben wir schon verstanden😉

Wenn ich das richtig verstehe, muss also das Gif immer wieder neu vom Browser abgerufen werden? Und wäre dann "no-chache" etwas?

Ob das so überhaupt funktioniert ist möglicherweise browserabhängig. Das mußt Du einfach probieren, ob der Browser ein Gif neu startet, wenn Du es nocheinmal lädst. Aber das wäre in jedem Fall die einzige Möglichkeit, es auf die "einfache" Art und Weise zu versuchen. Sonst hast Du keinen EInfluß auf das Verhalten eines einzelnen Gifs.

Besser wäre es, die im Gif enthaltenen Bilder in ein einziges Bild hintereinander zu packen und dann mit CSS (google nach CSS-Sprites) und Javascript eine kontrollierte Animation zu erzeugen (die Du starten und anhalten kannst wann Du willst)…

[Gunnar Bittersmann]

@@anma

Übrigens: Animierte GIFs sind bäh! Verwende ein Videoformat!

☞ Gif without the GIF

LLAP 🖖

[klawischnigg]

Hi there,

Übrigens: Animierte GIFs sind bäh! Verwende ein Videoformat!

Hängt vom Verwendungszweck ab.

☞ Gif without the GIF

Dieser "performance and ideas junkie" in dem von Dir verlinkten Artikel ist von seiner Idee so überzeugt, daß er auf seiner Seite lauter animierte Gifs zeigt. Ausserdem, funktioniert das auch auf richtigen Computern und Telephonen oder nur auf dem Apple-Spielzeug?

[Gunnar Bittersmann]

@@klawischnigg

☞ Gif without the GIF

Dieser "performance and ideas junkie" in dem von Dir verlinkten Artikel ist von seiner Idee so überzeugt, daß er auf seiner Seite lauter animierte Gifs zeigt.

Content negotiation‽

Ausserdem, funktioniert das auch auf richtigen Computern und Telephonen oder nur auf dem Apple-Spielzeug?

Das funktioniert auf richtigen Computern und Telephonen – nämlich denen von Apple. 😜

Allerdings bislang nur in Scheiß-Browsern – nämlich denen von Apple. 😉

LLAP 🖖