Question

I’ve created a vimeo slideshow in cycle -but there’s a problem.

in internet explorer the thumbnails don’t show up on the second run through the video.
I’ve set up a fiddle – let it play through once – on the second time the images dont show
any ideas anyone?

needless to say it works in firefox and chrome…

http://jsfiddle.net/zander/3hdPQ/6/

——–edit——-

After a bit of digging around I think it may be something to do with the display: class – both cycle and vimeo are changin display classes – I wonder if cycle is changing a display class to none, that it then cant change back?

I know thats a bit of a ramble – but its more of a hunch than actual data!

Answer 1

It seems there are a couple of ways to reproduce this issue by animating the parent of a swf (see this jsfiddle). My guess is that has something to do with the way the Vimeo player resizes the background of the SWF in relation to the way Internet Explorer communicates the jQuery CSS animation of the SWF’s ancestors to the Flash player. Given that, I don’t know what you can do except report the issue to Vimeo and see if they can work out a fix in their player code.

EDIT:

I was able to achieve the same effect as the built in fade transition without causing the issue with the Vimeo player by using the cycle plugin’s custom fx options, and specifying that the display property of the slide divs should be ‘block’ before and after the transition. Here is the code, see this jsFiddle for a working example:

$('.slideshow').cycle({
     fx:'custom', 
     cssBefore:{    
         display: 'block' 
     }, 
     animIn: {  
         opacity:1 
     }, 
     animOut: {  
         opacity:0
     }, 
     cssAfter:{
         display:'block'
     },
     delay: 1000
});