Search code examples
texthyperlinkrestartanimated-gif

Restart a GIF animation when you click on a text link

I have some GIF animations that I want to display in a webpage. Imagine a picture gallery made of GIFs that plays only once then they froze :) I would like to restart their animation every time I click on a text link. I updated a jsfiddle I found here, that does what I want, but when I click on the GIF, not on a text link.

Let's say I have 4 GIFs, I would like something like:

restart1 text link - GIF1 image
restart2 text link - GIF2 image
restart3 text link - GIF3 image
restart4 text link - GIF4 image

http://jsfiddle.net/GS427/97/

Thank you!

Solution

  • The thing your script does that restarts the GIF animation is to change the src attribute which reloads the gif.

    You can do this in many different ways, here is an example: http://jsfiddle.net/GS427/100/

     <a onclick='$("#img").attr("src","https://dl.dropboxusercontent.com/u/908148/once.gif");' href="#">this</a>

    You could extract it into a JavaScript function that take the image url as parameter. For example

    function changeImage(imageUrl){
    $('#img').attr('src',imageUrl);
}

    And then use this for example:

    <button onclick="changeImage('http://image1-url')">Image 1</button>
<button onclick="changeImage('http://image2-url')">Image 2</button>
<button onclick="changeImage('http://image3-url')">Image 3</button>
<button onclick="changeImage('http://image4-url')">Image 4</button>