Fancybox 2 Dynamic Width Based on Content Size

dynamic, fancybox, iframe, jquery, sizing

Solution

Looking at your `intro-file.cfm` file makes things clearer.

If your code inside the file is working fine, I think that you could get the dimensions from the `preview_wrapper` container.

Just two questions:

- if you are using `$` ... in `$('.loading-video').slideUp()` for instance, shouldn't you be including the `jquery.js` file inside your `intro-file.cfm` file?

- is this double `##` before the selector in `$('##preview_wrapper').width()` correct?

Assuming that everything is working fine, then try including in your fancybox script:

  scrolling: "no", // optional to avoid scrollbars inside fancybox
  beforeShow: function(){
   this.width = $('.fancybox-iframe').contents().find('#preview_wrapper').width();
   this.height = $('.fancybox-iframe').contents().find('#preview_wrapper').height();
  }

... to get the dimensions from the player's wrapper.

Problem

I've got an IFrame being opened via Fancybox 2 that plays a video: HTML: ``` <a class="fancybox-video" href="/user/intro-file.cfm" rel="file_name" title="View Video">File Name</a> ``` Javascript: ``` $("a.fancybox-video").fancybox({ scrolling : 'no', type : 'iframe', helpers : { title: null } }); ``` The video is user-uploaded, so I don't know the size. I will be setting a maxHeight and maxWidth on the Fancybox eventually, but I've removed them for easier troubleshooting. How can I set the width of the Fancybox based on the content? With my test file, which is around 400px wide, the fancybox itself is being set to 830/800px wide (the outer and inner widths): screencap of too-wide fancybox http://img528.imageshack.us/img528/3872/fancyboxwidth.png autoSize and fitToView have no effect. There's no CSS or code on the IFrame page that is setting a default width. If I force a width in the Fancybox code it works, but since my content is dynamic, it won't work for the live system. I also tried adapting a function from another question asking about height resizing, but it didn't work either: ``` beforeShow : function() { $('.fancybox-iframe').load(function() { $('.fancybox-inner').width($(this).contents().find('body').width()); }); } ``` Edit: Added the code of the IFrame page I'm trying to load into the Fancybox: ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <body> <cfoutput> <script type="text/javascript" src="/Javascript/jwplayer.js"></script> <script type='text/javascript'> var max_video_width = 924; jwplayer("preview").setup({ flashplayer: "/VideoPlayer/player.swf", controlbar: "bottom", file: "/videos/file_name", stretching: 'file_name', autostart: true, events: { onMeta: function(event) { if (get_meta) { if(event.metadata.width != undefined && event.metadata.height != undefined) { get_meta = false; if (event.metadata.width > max_video_width) { var new_height = (max_video_width / (event.metadata.width / event.metadata.height)) jwplayer("preview").resize(max_video_width,new_height); jwplayer("preview").stop(); $('##preview_wrapper').width(max_video_width).height(new_height); } else { jwplayer("preview").resize(event.metadata.width,event.metadata.height); jwplayer("preview").stop(); $('##preview_wrapper').width(event.metadata.width).height(event.metadata.height); } $('.loading-video').slideUp('fast',function(){$('.loading-video').remove()}); } } } } }); </script> </cfoutput> </body> </html> ```

Original source