mixing colorbox and media plugin won't resize correctly.

mixing colorbox and media plugin won't resize correctly.

I am trying to use colorbox with media plugin ( http://jquery.malsup.com/media/). The program uses ajax to load the links that make up the gallery and then opens the colorbox as a slideshow.

It works great for pictures. What I am trying to do is fill in the gap for the lack of native flash support in color box by the follwing method.

If a gallery item is an swf file instead of an image, the gallery link points to a player file instead of the image.
The player file contains a link pointing to the swf file.

I am trying to use the onComplete method like this:
  1. onComplete:function() {
  2.                         if ($("#playerbox").length > 0) { // Test if the player content was loaded instead of an image
  3.                             $("#playerbox").parent("div").css({"width":"400px","height":"400px"}); // Just trying to get some dimensions
  4.                             $(this).colorbox.resize();
  5.                             $('.cboxSlideshow_on').find('#cboxSlideshow').click(); // Stop the slideshow for a video
  6. /*
  7.                             //$(this).colorbox.resize({width:"400px",height:"400px"});
  8.                              // I cannot seem to get the resize function to take any parameters. I've tried every syntax combination I can think of, but only resize() does anything.
  9. */
  10.                         }
The result is:

  1. <div id="cboxLoadedContent" style="display: block; width: 0px; overflow: auto; height: 400px;">
  2.       <div style="width: 400px; height: 400px;">
  3.             <object height="400" width="400" type="application/x-shockwave-flash" data="/media/galleries/Gallery_13_Img_53.swf" id="playerbox" style="visibility: visible;">
  4.                   <param name="bgColor" value="#ffffff">
  5.                   <param name="wmode" value="transparent">
  6.                   <param name="autoplay" value="false">
  7.             </object>
  8.       </div>
  9. </div>
The colorbox resizes to the correct height but retains a width of 0px. Any idea what is wrong?

The entire function looks like this:

  1. function showGallery(id) {
  2.     if (window.gallery_init === true) {
  3.         var error = false;
  4.         $.ajax({
  5.             type: "GET",
  6.             url: "/apps/galleries/gallery_items.php",
  7.             data: "idgallery="+id+"&player=1",
  8.             cache: false,
  9.             success: function(html){
  10.                 $("#galleryContents").html(html);
  11.                 $("a[rel='gallery_"+id+"']").colorbox({
  12.                     slideshow:true,
  13.                     open:true,
  14.                     onComplete:function() {
  15.                         if ($("#playerbox").length > 0) {
  16.                             $("#playerbox").media({isWindowless:false});
  17.                             $("#playerbox").parent("div").css({"width":"400px","height":"400px"});
  18.                             $(this).colorbox.resize();
  19.                             $('.cboxSlideshow_on').find('#cboxSlideshow').click();
  20.                             //$(this).colorbox.resize({width:"400px",height:"400px"});
  21.                         }
  22.                     }
  23.                 });
  24.                },
  25.             error: function() {
  26.                 error = true;
  27.             }
  28.         });
  29.         if (error) { return true; } else { return false; }
  30.     }
  31. }