Loading JW Player Inside of FancyBox

Question

Folks, I feel like I'm close, but no prize. Here's the code that I'm using to load a Fancybox and through which I am attempting to load JW Player.

<script type="text/javascript">
      jQuery(window).load(function() {
        jQuery("a.fancybox").fancybox({
          'content':'<div id="mediaspace">Test</div>',
            maxWidth    : 800,
            maxHeight   : 600,
            fitToView   : false,
            width       : '70%',
            height      : '70%',
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'none',
            closeEffect : 'none',
            afterLoad: function() {
                jwplayer('mediaspace').setup({
                    'flashplayer': '<?php bloginfo('template_directory'); ?>/lib/jw/player.swf',            
                    'file': 'LtGoBZ4D4_E', 
                    'image': 'http://img.youtube.com/vi/LtGoBZ4D4_E/0.jpg',
                    'provider': 'youtube',
                    'height': 400,
                    'width': 700,
                    'controlbar.position': 'bottom',
                    'youtube.quality': 'highres'
                });
          }
        });
      });
    </script>

Please forgive the code formatting, I've been experimenting with a lot of different options.

JW Player does work outside of fancybox. Any ideas or alternate ways of looking at the problem?

Answer 1

The afterLoad callback doesn't fire because there is no image or video inherent to the fancybox plugin that would need to "load". Instead of:

    afterLoad: function() {

Use:

    afterShow: function() {

That will solve your problem.

Here is a link to the documentation for further reference or future API changes: http://fancyapps.com/fancybox/