3

Right now I have a flexslider with four slides. The third slider is a gif rather than a jpg like the others. The issue I am having is that this third gif slider apparently starts immediately when the page is reached as opposed to when you actually get to that slider. By the time one clicks through the first two sliders, the gif is just about finished.

Anyone have any idea as to how I would begin a GIF only when one reaches that slider?

Matt C.
  • 2,330
  • 3
  • 22
  • 26

2 Answers2

2

I finally found the solution for you after one hour of test, add the before function to your declaration code, and change the src of next img to empty and back to the original src do the work, like bellow :

JS :

this code will init the gif just before the display.

  $('.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);
    }
  });

Its work perfectly for me.

See JS Fiddle (you can notice that the counter in gif always start by 10, without before function you find that the counter is already start), hope that help.

Zakaria Acharki
  • 66,747
  • 15
  • 75
  • 101
1

As far as I know, it's not really possible to pause/stop/play GIF animations using code.

The workarounds I know of are...

  1. Some browsers won't start the GIF animation until the element is actually visible on the screen, so you could hide the image until the slide is active and then $('#MyGifImage').show(). You'll need to test how this behaves in various browsers, however.

  2. As suggested in this question you could create image sprites instead of an animated GIF.

Have you tried either of those methods?

Community
  • 1
  • 1
Simon East
  • 55,742
  • 17
  • 139
  • 133
  • Tried sprites approach but it seems a little outdated. As far as your suggestion #1, is there a way to figure out the "active" slide? – Matt C. Jul 20 '15 at 23:56
  • @MattC. I think you'll find that animated GIFs are a much older technology than using CSS sprites. And yes, Flexslider has a JS API that can trigger events for you. I'm out at the moment so can't put code down for you. – Simon East Jul 21 '15 at 00:01