Show hidden div in fancybox using jquery not working

Question

I am trying to get this code to work. I have a hidden div that shows flash videos using the object / embed method.

This is the js code I'm using.

jQuery(document).ready(function(){ jQuery("a[id^='scrshot_']").fancybox( { 'autoDimensions' : false, 'width' : 640, 'height' : 360 }); return false;}); 

I use this method, which I found on this site http://www.jdmweb.com/resources/fancy_videos and is pretty easy to implement. I use dynamically generated identification tags. BUT for some reason fancybox will open, but the div inside will remain hidden. When I use firebug to look at it, it shows a flash object inside, but it still has a display: none attribute. How can you show the contents inside this div, and not the whole div? If the div shows and uses the link, fancybox opens with the player in order. Obviously, this will not work, because I do not want the video to be shown until it runs in fancybox.

An example of my html code.

  <a class='scrshot' id='scrshot_1' href='#showvid_1'>Click Here</a> <div class='showvid' id='showvid_1'>my embedded code here</div> 

Answer 1

Instead of hiding the div, make it visible, but wrap it inside another div that is hidden.

(I do not know why fancybox does not switch visibility, but annoys.)

Answer 2

try adding this to your jQuery(document).ready(function(){

 jQuery('.scrshot').live('click',function(){ jQuery('.showvid').hide(); //hide any that might be open jQuery(jQuery(this).attr('href')).show(); //show the div we clicked for }); 

Answer 3

Have you looked at the fancybox documentation / blog? http://fancybox.net/blog (4. Show youtube clips, this should help); http://fancybox.net/howto ; http://fancybox.net/api ;