0

I have two divs : one for the static image(jpg) and the other one for the animated image (gif)

Like this: 

<div class="badge-animated-container-static gif-post "><img class="badge-item-img" alt="Nunca dos viajes" src="http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/11/nevertwotrips.jpg" />
<span class="play">Play</span></div>
<div class="badge-animated-container-animated hide"><img class="badge-item-animated-img" alt="Nunca dos viajes" src="http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/11/nevertwotrips.gif" /></div>

And i use this JavaScript to perform onClick function so like that when i click over the static div.. disappear with css display:none and my animated div comes up with the gif that i want to display. My problem is that when my website load... the animated div that is hiding the GIF is playing the gif without stoping ... i want to be able to when i click over the static image it plays the gif from the beginning.

How can i accomplish this?

<script>
$('.badge-animated-container-static').click(function() {
$(this).addClass('hide');
$('.badge-animated-container-animated').removeClass('hide');
});

$('.badge-animated-container-animated').click(function(){
$(this).addClass('hide');
$('.badge-animated-container-static').removeClass('hide');
});
</script>
Oscar Batlle
  • 157
  • 2
  • 4
  • 22
  • 1
    I don't think you can control that. The key should be having the browser "load" the gif only after the click. You may have luck directly changing the `src` attribute (take a look [here](http://stackoverflow.com/q/5818003/1836314)), but you should preload the GIF "raw" data into a js variable and set the `src` to that raw data rather then the simple file URL. This goes beyond your question, though. – matpop Nov 17 '13 at 16:45
  • Yes, but lets say i got a bunch of images.. can i do this(look the uppercase words)? $(e).hover(function(){ $(this).attr('src', src.replace('STATIC CLASS IMAGE', 'ANIMATED GIF IMAGE CLASS')); – Oscar Batlle Nov 17 '13 at 16:53
  • like instead to replace myimage.jpg to myanimatedgif.gif it would be .static-class replaced with .animated-class – Oscar Batlle Nov 17 '13 at 16:54
  • You may construct names as you like, that's not relevant – matpop Nov 17 '13 at 16:59
  • I know but im talking about to use the static class where my static image is and my animated class where my animated image is... instead of using the full path url like staticimage001.jpg or animated-image200.gif .. because i have so many images and i dont want to go 1 by 1 so i want to be able to grab the url using my div class – Oscar Batlle Nov 17 '13 at 17:03
  • lets say : $(e).hover(function(){ $(this).attr('src', src.replace('.badge-animated-container-static', '.badge-animated-container-animated')); – Oscar Batlle Nov 17 '13 at 17:04

0 Answers0