1

I have a page where there's a link that opens an iFrame with fancyBox (I'm using fancyBox 2). The content that is contained within the iFrame will vary in width and height, so I need the width and height of the iFrame to be dynamic. I don't want scroll bars to appear. I want the fancyBox to be generated with the exact width and height of the contents that the link references (in this case it's the cruise-compare.html page).

Here's the HTML from the page I'm talking about that's relevant to this issue:

<div id="compareShipSubmit">
    <a id="cruiseCompareSubmit" class="fancybox.iframe" href="../cruise/cruise-compare.html">Compare</a>
</div>

Here's a sample of the HTML that's within the body tags of the cruise-compare.html page that would be inside of the iframe:

<div id="cruiseCompareSurround">
    Content would go here, and would vary in width and size
</div>

Here's what my fancyBox javascript looks like now (this script is referenced to by the originating page):

$("#cruiseCompareSubmit").fancybox({
    width       : 935,
    height      : 485,
    fitToView   : false,
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'elastic',
    closeEffect : 'elastic'
});

I know that I need to remove the width and height parameters in the fancyBox script I provided above, but I can't figure out how to get the fancyBox that's generated to have the width and height of the cruise-compare.html page's contents.

I saw this similar question (Fancybox 2 Dynamic Width Based on Content Size), but I can't figure out how to make it function correctly in my situation (they were doing something a little different than me).

Can anyone tell me what to do to make this work the way I'm trying to get it to work?

Kara
  • 6,115
  • 16
  • 50
  • 57
joeh0717
  • 79
  • 2
  • 10
  • As a followup, I've tried to get this to work using fancyBox's beforeLoad callback and that didn't work. I have a feeling that's the way to go, by referencing the div (in a function defined in the beforeLoad callback) that contains the content of the iFrame that loads, and finding the width and height of that object and setting the fancyBox's width and height to be equal to that, but I can't seem to get it to work. Any advice? – joeh0717 Aug 06 '12 at 22:00
  • yep, maybe assigning dimension to the container `cruiseCompareSurround` and getting its size with `this.width = $('.fancybox-iframe').contents().find('#cruiseCompareSurround').width();` inside the `beforeShow` callback. – JFK Aug 07 '12 at 03:57

0 Answers0