Loading JW Player inside FancyBox

Question

People, I feel like I'm around, but there is no prize. Here is the code that I use to download Fancybox and through which I am trying to download 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 formatting of the code, I experimented with many different options.

JW Player works outside of fancybox. Any ideas or alternative ways to deal with the problem?

Answer 1

The afterLoad callback does not start because there is no image or video inherent to the fancybox plugin that will need to be “uploaded”. Instead:

  afterLoad: function() { 

Using:

  afterShow: function() { 

This will solve your problem.

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