CODEWITHSUNDEEP
javascripthtmlcssloopsonclick
deckard
deckard

Reputation: 11

How do i set an Onclick effect to only work at a specific time?

I have a gif on my page that only plays once and stops at the last frame. The reason for this is that I wish for the gif to only play when I click it, and then stop at the last frame until it's clicked again. I've added an onclick effect that makes the gif restart from the first frame, and I've made this effect work using the following JSFiddle link.

The effect works like it's supposed to, but I noticed that if you double click, or click before the gif is finnished playing, it restarts the gif mid-play. Is there a way I can make the onclick effect (reloading the gif) only work after a set amount of time (preferably a set amount of time after the gif has started) so that the onclick effect only works when the gif has reached the last frame?

I've got the idea of adding a layer-image (of the last frame) overlapping the gif, and then I give this image the onclick effect, aswell as the effect to hide/disappear on click, and then reapearing after a set amount of time (being the time it takes for the gif to play once), but I don't know how to do this. Could someone please help me? feel free to use the JSFiddle link I provided above.

Also, being a noob, I don't know how to put the codes from my JSFiddle link into notepad, can someone help?

So far I've got this...

<html>
<head>
<title>Around The World</title>

<script>
$(function(){
    var image = new Image();
    image.src ='Hopping No Repeat.gif';
    $('#img').click(function(){
       $(this).attr('src',image.src);
    });
});
</script>


<style>
img{
    width:150px;
    height:206px;
}
</style>

</head>
<body bgcolor="lightblue">

<img id = "img"

src = "Hopping No Repeat.gif">

</body>
</html>

When I set it like this, the onclick effect doesn't work.. sorry for incompitance, I'm sure it's something obvious like a tag slip or something, but I'd apprechiate some assistance.

Thanks to all in advance!

Upvotes: 1

Views: 155

Answers (2)

DivinusVox
DivinusVox

Reputation: 1191

Given that you are doing the "animation" based on re/loading a gif, there's not a quick way to hook into the event of the image "ending" event.

A quick sample is using a flag to indicate action while using a timeout after a reasonable amount of time to indicate the action should be done. See: http://jsfiddle.net/GS427/55/

$(function(){
  var image = new Image();
  image.in_action = false;  // flag to determine current state. Initialize to ready to animate.
  image.duration = 750;  // This is rough, if you are creating the gif you can peg this to the proper duration
  image.src ='http://inftek1.dyndns.org/daniel/test123/Hopping No Repeat.gif';
  $('#img').click(function(){
    if (!image.in_action) {
      image.in_action = true;  // Set the image as in progress
      $(this).attr('src',image.src);
      window.setTimeout(function() {
        image.in_action = false;  // After image.duration miliseconds, set as finished
      }, image.duration);
    }
  });
});

If I were doing this with as much fidelity as possible I would modify this example to only trigger after the initial gif is downloaded and cached (since we don't know how long downloading the image will take), but that starts creeping into more complicated territory.

Upvotes: 1

Waltur Buerk
Waltur Buerk

Reputation: 1368

This is pretty crude, and hence simple and straight forward.

Whenever you click the gif it does a test to see if variable "playing" is not set to true, then it sets playing = true, and after a given time (600 ms in this case) sets the attribute playing = false.

$(function(){
    var image = new Image();
    image.src ='http://inftek1.dyndns.org/daniel/test123/Hopping No Repeat.gif';

    var playing = false;

       $('#img').click(function(){

           if (playing != true) {

               $(this).attr('src',image.src);

               playing = true;

               setTimeout(function() {
                   playing = false;
                }, 600);
           }
       });
});

At least this is the way that seems most logical to me since there is no natural way of detecting if the gif is playing. The only drawback here is you have to enter the animation duration manually.

Upvotes: 1

Related Questions