Wie spielt man ein GIF auf klicken Sie auf (wie 9GaG.com) mit wordpress?

Ich brauche, um diese umzusetzen "gif player" in eine wordpress-Website, weil gif-Seiten sind bis zu 6mb, also die Leistung ist echt beschissen

Ive Lesen Sie diese Onclick spielen GIF-Bild mit jQuery und von Anfang an starten
auch in diesem
Wie spielt man animierte GIF von Anfang onclick-Funktion fast eine Lösung, aber ich weiß nicht, wie dies geschehen soll mit wordpress in jedem Eintrag

9gag.com funktioniert es perfekt; zeigt ein Vorschau-Bild , wird das gif onclick, und stoppen Sie die gif, wenn Ihr wieder geklickt. Wenn der Benutzer erneut darauf klickt, spielt das gif wieder von vorn

Wie kann ich erreichen, das mit wordpress?

InformationsquelleAutor roquelage | 2014-01-04

  1. 16

    Was 9GAG im wesentlichen Tat, war, hatte er zwei Bilder - das eine war die animierte GIF-Datei, und der andere war immer noch JPG.

    Bevor Sie darauf klickte, zeigte es die JPG-Datei. Nachdem Sie ihn angeklickt, geladen das GIF in der gleichen <img> tag, und Sie denken, dass es "gespielt" das GIF-Bild.

    Wenn Sie klicken Sie auf es wieder, es lädt die JPG-Datei zurück in die <img> tag, und Sie denken, dass es "pausiert" das GIF-Bild.

    Image manipulation, wie Sie nur mit einem GIF, und Pause und spielen, es ist viel, viel zu schwer, um von praktischem nutzen - diese Methode ist eine der besten Möglichkeiten, es zu tun.

    Hier einige code:

    <div id="gifdiv">
  <img src="staticgif.jpg" />
</div>
<script type="text/javascript">
  $("#gifdiv").click(function () {
    if ($(this).find("img").attr("data-state") == "static") {
      $(this).find("img").attr("src", "animatedgif.gif");
    } else {
      $(this).find("img").attr("src", "staticgif.jpg");
    }
  });
</script>

    Auch, wenn Sie wollen, für die Geschwindigkeit, ich denke 9GAG hat es durch die Vorspannung das GIF vorher, wie diese:

    <script type="text/javascript">
  (new Image()).src = "animatedgif.gif"; //this would preload the GIF, so future loads will be instantaneous
</script>

    Hoffe, das hilft.

    Absolut, du hast Recht, diese Lösung [link]stackoverflow.com/questions/20032860/... [/link] die Sache ist Die, ich weiß nicht, wie dies zu realisieren ist mit wordpress, zumindest manuell in jeden Beitrag und blog-homepage
    Wenn Sie möchten, dies zu realisieren ist mit wordpress, ist die einzige Möglichkeit die mir einfällt, ist irgendwie Injektion einige javascript-code in der blog-Seite (vielleicht durch ein wordpress-plugin, ich weiß es nicht).
    Wo platziert werden soll das Skript? Ich habe versucht diesen code für einen test in einer nicht-wordpress-Seite, aber ohne Glück. andaluciabiotecnologica.com/prueba.html Es zeigt das statische Bild, tut aber nichts onclick
    Sie können das Skript, wohin Sie wollen, solange es in der blog-Seite. Das Skript sollte dann $(function () { und }); um ihn herum, wie Sie es wollen laufen, nachdem die Seite geladen wird, nicht vor.
    Ich versuchte es viele Male, und ich kann nicht ankommen es zu wirken. Dein code scheint nicht sinnvoll, vielleicht im tun, etwas schlechtes von mir. Dies ist mein letzter code: <script type="text/javascript"> $('#gifdiv').klicken Sie auf(Funktion () { wenn ($(this).find("img").attr("data-Status") == "statisch") { $(this).find("img").attr("src", "andaluciabiotecnologica.com/animatedgif.gif"); } else { $(this).find("img").attr("src", "andaluciabiotecnologica.com/staticimage.png"); } }); </script> <div id="gifdiv"> <img src="andaluciabiotecnologica.com/staticimage.png" /> </div>

    InformationsquelleAutor think123

  2. 2

    Wenn Sie nicht anhalten wollen, können Sie problemlos Abspielen der gif-Datei. Einfach auf "trigger" klicken Sie auf und laden Sie die gif in das Bild-tag.

    your_image= document.getElementById oder aber Sie wollen schnappen Sie sich die Referenz auf das Bild.
    dann legen Sie einen Ereignis-listener für das klicken.

    Dann your_image.src= your_image.src; Und das gif wird wieder ausgeführt wird.

    Danke für den Tipp. Alles was ich tun musste, war fügen Sie diesen code in mein img-tag: onclick="this.src=this.src"

    InformationsquelleAutor bobbdelsol

Schreibe einen Kommentar