Auto height resizing in Fancybox

Question

In an attempt not to hijack other posts I've decided to start my own one. I've been messing about for days and cannot figure out how to have the height of Fancybox iFrame automatically size to the content. Here's how I'm calling it:

<script type="text/javascript">
    $(document).ready(function() {
        $(".various").fancybox()({
            maxWidth    : 713,
            minHeight   : 250,
            fitToView   : false,
            autoSize    : true,
            autoScale   : true,
            closeClick  : true,
            openEffect  : 'fade',
            closeEffect : 'fade',
            scrolling   : false,
            padding     : 0,
        });
    });
</script>

I thought that setting a minHeight and autoScale would do it but it hasn't. And using resize(); does nothing.

Thanks all!

score 19 · Answer 1 · edited May 23 '17 at 12:15

First, I hope you understand what you mean when you say "Fancybox iFrame", which it means that you are opening an external html/php file using the fancybox's option iframe, either setting it as a class within your link like :

<a href="external.html" class="fancybox fancybox.iframe">open external file in fancybox</a>

(I assume you are using fancybox v2.x because the options in your script) ... or as an option within your custom script:

$(".fancybox").fancybox({
 width: 620, // or whatever
 heigh: 320,
 type: "iframe"
});

Second, you need to beware that options for fancybox v1.3.x and v2.x are not compatible with each other. For instance, you are using in your script fitToView (fancybox v2.x) and autoScale (v1.3.x). If you are really using fancybox v2.x, autoScale won't be recognized.

Third, resize() is neither an option for fancybox v1.3.x or v2.x. If using v2.x, you should rather use $.fancybox.update()

Last, the only possible (should I say, the "easiest") way I think to "auto" resize fancybox when opened in iframe mode is:

you should have control over the external.html page you want to open (you should own it and running eventually within the same domain) so you can add the elements that fancybox would need to resize it. Other pages that are not yours (picssel.com for instance) won't allow you to auto-resize the iframe automatically (you could re-size them manually but I don't think that's the idea.)
you should be using fancybox at least 2.0.6+

How-to?

Edit your external.html file and set dimensions to the <html> tag like

<html lang="en" style="width: 800px; height: 400px;">

(you may want to assign the height property only though)

Then use the callback option beforeShow to get the dimension from the iframe like:

  beforeShow: function(){
   this.width = $('.fancybox-iframe').contents().find('html').width();
   this.height = $('.fancybox-iframe').contents().find('html').height();
  }

also, fitToView should be set to false

Check https://stackoverflow.com/a/10776520/1055987 for a sample code, which it also includes a DEMO.

Oh boy, I've been silly haven't I!? I do indeed own the content that is being linked to, and it is in the same location. I am also using the latest version of FancyBox, downloaded from their website. So I am to add the beforeShow function to the code I originally listed and remove the width and height properties from that original code? Thank you very much indeed! — HedKandiMan, Jun 13 '12 at 11:23

score 2 · Answer 2 · answered Dec 12 '14 at 01:21

I know this is an old thread, but I am positive this will help other people who land here. Even if you don't have control over the iframe content, by leaving the fitToView parameter in its default value (true) and calling the Fancybox update() method on window resize:

$(window).resize(function() { $.fancybox.update(); }); However, if you are displaying other content as well (such as images pdfs, etc.), Fancybox will automatically fit them to the size of the screen. In that case, you could of course initialize fancybox for iframes and images with different parameters.

Auto height resizing in Fancybox

2 Answers2

Linked