GIF slider in flexslider, how to start gif only when on slider
Right now I have a flexslider with four slides. The third slider is gif, not jpg like others. The problem I am running into is that this third gif slider seems to start right away when the page is reached, not when you actually get to that slider. By the time one click through the first two sliders, the gif is almost done.
Anyone have an idea how I will start using GIF only when you reach this slider?
source to share
I finally found a solution for you after one hour of testing, add a function before
to your declaration and change the src
following img
to empty and back to the original, src
make it work like a roar:
JS:
this code will run the gif just before displaying.
$('.flexslider').flexslider({
animation: "slide",
before: function(slider){
var src = $(slider).find('.flex-active-slide').next().find('img').attr('src');
$(slider).find('.flex-active-slide').next().find('img').attr('src','').attr('src',src);
}
});
His job is great for me.
See the JS Fiddle (you may notice that the counter in the gif always starts at 10, without you find that the counter is already running), hopefully help. before
source to share
As far as I know, it is not actually possible to pause / stop / play a GIF animation using code.
The workarounds I know of are ...
-
Some browsers won't run the GIF animation until the element is visible on the screen, so you can hide the image until the slide is active, then
$('#MyGifImage').show()
. However, you will need to check how this works in different browsers. -
As suggested in this question , you can create image sprites instead of an animated GIF.
Have you tried one of these methods?
source to share