Show hidden div in Fancybox using JQuery not working

Question

I've been trying to get this code to work. I have a hidden div that shows a flash video 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'm using this method I found on this site http://www.jdmweb.com/resources/fancy_videos and pretty easy to implement. I use dynamically created ID tags. BUT for some reason fancybox will open but the div inside stays hidden. When I use firebug to look at it, it shows the flash object inside but it still has the display:none attribute attached to it. How do you get it to show the contents inside that div and not the whole div? If the div is showing and use the link, fancybox open with the player fine. Obviously that wont work because I don't want the video to show until it launches in fancybox.

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 don't know why fancybox doesn't toggle the visibility, rather annoying.)

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
});