How can i play a gif like 9 gag?

Question

http://www.9gag.com

I want pause and play a gif,like the 9gag,

how can i do that?

I know I have to use one. Jpg and. Gif but I tried a few things but did not work

I found this function

function is_gif_image(i) {
        return /^(?!data:).*\.gif/i.test(i.src);
    }

    function freeze_gif(i) {
        var c = document.createElement('canvas');
        var w = c.width = i.width;
        var h = c.height = i.height;
        c.getContext('2d').drawImage(i, 0, 0, w, h);
        try {
            i.src = c.toDataURL("image/gif"); // if possible, retain all css aspects
        } catch(e) { // cross-domain -- mimic original with all its tag attributes
            for (var j = 0, a; a = i.attributes[j]; j++)
                c.setAttribute(a.name, a.value);
            i.parentNode.replaceChild(c, i);
        }
    }

    function unfreeze_gif(id, src) {
     i = document.getElementById(id);
        i.src = src;
    }

but i dont know how to use on the HTML

Can someone give me an example? with HTML , CSS E JS (or Jquery) ?

Thanks

Answer 1

It's just 2 versions of the image: One static JPG, one moving GIF.

Here's a fiddle that mimic the behaviour: http://jsfiddle.net/bortao/QADeM/

JS

$(".gif-post").on("click", function () {
    var $this = $(this);
    var img = $this.find("img"); // Find the image element
    if (!this.playing) {
        this.playing = true; // Set or create a variable
        img.attr("src", img.attr("src").replace(".jpg", "a.gif"));
        $this.find(".play").hide(); // Hide the overlay
    } else {
        this.playing = false;
        img.attr("src", img.attr("src").replace("a.gif", ".jpg"));
        $this.find(".play").show();
    }
});

Answer 2

I was actually working on a 9gag clone myself, so i was searching as well for a gif player.

You can use this one: http://freezeframe.chrisantonellis.com/

All you have to do for this one is include the javascript and in the .gif link and add the following class: "freezeframe"

There is also this one: http://quickleft.com/blog/embeddable-animated-gifs-with-controls-just-in-time-for-christmas

I haven't used it, but it seems very interesting.