CODEWITHSUNDEEP
javascriptjquerygifanimated-gif
Isaac Lubow
Isaac Lubow

Reputation: 3573

How to use JS to trigger a GIF animation?

I have an animated GIF that plays once (doesn't loop). I would like it to animate when clicked. I tried something like this:

 $('#plus').click(function(){
    $('#plus').attr('src','');
    $('#plus').attr('src','img/plus.gif')
 });

With the hope that quickly resetting the src would trigger the animation, but no luck. Anyone know what would do it?

Upvotes: 7

Views: 10629

Answers (6)

sledgeweight
sledgeweight

Reputation: 8095

For those who want to do this when it scrolls into view i did the following.

Link for appear.js : https://github.com/morr/jquery.appear

$('img.large-magnify-glass-animation').appear(function() {
    $(this).delay(200, function(){
        $(this).attr('src','http://example.com/path/to/gif.gif');
    });
});

I just loaded the same gif via the attr('src') upon visiblity after a short delay. No timestamp or random char function. Just used appear plugin.

Upvotes: 0

kennebec
kennebec

Reputation: 104770

function refreshSrc(who){
    return who.src= who.src.split('?')[0]+'?='+(+new Date());
}
refreshSrc(document.images[0])

Tart it up with jQuery syntax, if you like.

Upvotes: 2

Koobz
Koobz

Reputation: 6938

This is a bit of an alternative approach.

You could export the individual frames as their own images and handle animation via javascript.

It lets you do a couple of cool things. A colleague recently had a little timer animation that was synced to the configurable slideshow interval in our image gallery.

The other thing you get out of this is you could use pngs and have translucent backgrounds.

There's probably a sprite animation library for javascript out there somewhere :)

Upvotes: 1

adam0101
adam0101

Reputation: 30995

Try adding the image with a randomly generated querystring so it looks like a new image to the browser.

<script language="javascript" type="text/javascript">
function randomString() {
    var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
    var string_length = 8;
    var randomstring = '';
    for (var i=0; i<string_length; i++) {
        var rnum = Math.floor(Math.random() * chars.length);
        randomstring += chars.substring(rnum,rnum+1);
    }
    document.randform.randomfield.value = randomstring;
}
$('#plus').click(function(){
    $('#plus').attr('src','img/plus.gif?x=' + randomString())
    });
</script>

Upvotes: 8

Richard Marskell - Drackir
Richard Marskell - Drackir

Reputation: 13302

You could try having a single-frame image (of the first frame of animation) and show/hide each one on click. If you want it to reset back to the single-frame image when the animation is done, you could use setTimeout (with how long the animation is as the length of time) and have it hide the animation and show the static image.

Upvotes: 0

mdrg
mdrg

Reputation: 3402

Have you tried removing the img tag and adding it back again? (never tried it, just an idea)

Upvotes: 0

Related Questions