2

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!

JorgeLuisBorges
  • 528
  • 3
  • 8
  • 21

1 Answers1

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
});
Ryan Lynch
  • 7,676
  • 1
  • 24
  • 33
  • thanks for looking into it... I've edited the question with more of what I think may be causeing the issue – JorgeLuisBorges Dec 06 '11 at 14:33
  • looking good - works well in internet exlporer - unfortunately breaks the animation a little in firefox on my pc (but wierdly fine on mac firefox) - no longer a smooth transition – JorgeLuisBorges Dec 09 '11 at 09:36
  • Then use browser detection to use your options for Firefox and Chrome, and my options for IE, as in this fiddle: http://jsfiddle.net/RMXfJ/. – Ryan Lynch Dec 09 '11 at 14:49
  • Did this answer help you? The time limit on the bounty is running out, and I think that I've offered a pretty complete answer. – Ryan Lynch Dec 12 '11 at 18:20
  • Hi Ryan, I've been on holiday and away from my pc, so haven't ben able to test thoroughly, but don;t worry - if the bounty runs out I will give you the points somehow... Sorry I haven't been able to get to it sooner... – JorgeLuisBorges Dec 13 '11 at 09:35
  • Well, if the answer works for you, accept it and that will have to do. – Ryan Lynch Dec 13 '11 at 18:37
  • I ended up using a different methoed that pulls an image as a seperate entity from my CMS as a cover slide - cant really remember the full details as christmas blanked my mind! – JorgeLuisBorges Apr 12 '12 at 10:24