11

I need to implement this "gif player" in a wordpress site, because gif pages are up to 6mb, so performance is really crappy

I´ve read this Onclick play GIF image with jQuery and start from beginning also this How to play animated GIF from the beginning onclick function that were almost a solution but i dont know how this should be done with wordpress in every entry

9gag.com does it perfectly; shows a preview image , reproduces the gif onclick, and stop the gif if its clicked again. If clicked again, plays the gif from the start again

How can i accomplish this with wordpress?

Community
  • 1
  • 1
roquelage
  • 111
  • 1
  • 1
  • 3

2 Answers2

15

What 9GAG essentially did was it had two images - one was the animated GIF, and the other was a still JPG.

Before you clicked on it, it showed the JPG file. After you clicked on it, it loaded the GIF into the same <img> tag, and made you think it "played" the GIF image.

If you click on it again, it loads the JPG file back into the <img> tag, and made you think it "paused" the GIF image.

Image manipulation, like only using one GIF and pausing and playing it is far, far too difficult to be of practical use - this method is one of the better ways to do it.

Here's some 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>

Also, if you wish for speed, I think 9GAG does it by preloading the GIF beforehand, like this:

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

Hope this helps.

Lucas
  • 16,930
  • 31
  • 110
  • 182
  • Absolutely, you are right its this solution [link]http://stackoverflow.com/questions/20032860/how-to-play-animated-gif-from-the-beginning-onclick-function [/link] The thing is i dont know how to implement this with wordpress, at least manually in every post and blog homepage – roquelage Jan 04 '14 at 02:59
  • @roquelage If you want to implement this with wordpress, the only way I can think of is somehow injecting some javascript code into the blog page (maybe through a wordpress plugin, I wouldn't know). – Lucas Jan 04 '14 at 03:01
  • Where should be placed the script? Ive tried this code for a test in a non wordpress site, but with no luck. http://www.andaluciabiotecnologica.com/prueba.html It shows the static image, but does nothing onclick – roquelage Jan 04 '14 at 16:46
  • @roquelage You can place the script anywhere you want, as long as it's included in the blog page. The script should then include `$(function () {` and `});` around it, as you want it run after the page loads, not before. – Lucas Jan 04 '14 at 22:41
  • I tried it a lot of times, and i cant get it to work. Your code seems appropiate, maybe im doing something bad by myself. This is my final code:
    – roquelage Jan 07 '14 at 23:54
  • i tried even using the same names for id and stuff, or inserting the script in the head or just before the img div. Chrome says Uncaught ReferenceError: $ is not defined, i dont know if that helps. Thanks for your time – roquelage Jan 07 '14 at 23:57
  • @roquelage you need jquery – clankill3r Apr 07 '15 at 10:15
  • Although the script seems still to be wrong with the data-state not set. – clankill3r Apr 07 '15 at 10:17
  • @clankill3r From what I know (which isn't much), just by writing `attr("data-state")` jQuery will return undefined, without outputting an error (which suits the use here rather well). Correct me if I'm wrong :D – Lucas Apr 07 '15 at 11:12
  • I don't know much either :) – clankill3r Apr 07 '15 at 12:34
  • @think123 did you also mean to change the data-state of the button in your jquery, so it could "pause" and "play"? – wasabigeek May 01 '15 at 04:50
  • @clankill3r your script has to load after JQuery, meaning it should be placed below the tag that loads JQuery. The script is currently placed near the top of the body, but all the JQuery is loading after your footer. You have to place the script below those tags and it should work fine. – wasabigeek May 01 '15 at 04:53
2

If you don't want to pause, you can easily REPLAY the gif file. Just trigger on the click and reload the gif into the image tag.

your_image= document.getElementById or however you want to grab the reference to the image. then set an event listener for the click.

Then your_image.src= your_image.src; And the gif will run again.

bobbdelsol
  • 996
  • 6
  • 21
  • Thanks for the tip. All I needed to do was add this code in my img tag: `onclick="this.src=this.src"` – Baodad May 01 '18 at 21:52