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:
- onComplete:function() {
- if ($("#playerbox").length > 0) { // Test if the player content was loaded instead of an image
- $("#playerbox").parent("div").css({"width":"400px","height":"400px"}); // Just trying to get some dimensions
- $(this).colorbox.resize();
- $('.cboxSlideshow_on').find('#cboxSlideshow').click(); // Stop the slideshow for a video
- /*
- //$(this).colorbox.resize({width:"400px",height:"400px"});
- // 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.
- */
- }
The result is:
- <div id="cboxLoadedContent" style="display: block; width: 0px; overflow: auto; height: 400px;">
- <div style="width: 400px; height: 400px;">
- <object height="400" width="400" type="application/x-shockwave-flash" data="/media/galleries/Gallery_13_Img_53.swf" id="playerbox" style="visibility: visible;">
- <param name="bgColor" value="#ffffff">
- <param name="wmode" value="transparent">
- <param name="autoplay" value="false">
- </object>
- </div>
- </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:
- function showGallery(id) {
- if (window.gallery_init === true) {
- var error = false;
- $.ajax({
- type: "GET",
- url: "/apps/galleries/gallery_items.php",
- data: "idgallery="+id+"&player=1",
- cache: false,
- success: function(html){
- $("#galleryContents").html(html);
- $("a[rel='gallery_"+id+"']").colorbox({
- slideshow:true,
- open:true,
- onComplete:function() {
- if ($("#playerbox").length > 0) {
- $("#playerbox").media({isWindowless:false});
- $("#playerbox").parent("div").css({"width":"400px","height":"400px"});
- $(this).colorbox.resize();
- $('.cboxSlideshow_on').find('#cboxSlideshow').click();
- //$(this).colorbox.resize({width:"400px",height:"400px"});
- }
- }
- });
- },
- error: function() {
- error = true;
- }
- });
- if (error) { return true; } else { return false; }
- }
- }