Geek Answers Handbook

Auto Resize in Fancybox

In an attempt not to seize other posts, I decided to start my own. I tried for many days and cannot figure out how to automatically increase the size of the Fancybox iFrame for content. This is what I call 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 installing minHeight and autoScale would do this, but that is not the case. And using resize(); doing nothing.

Thanks everyone!

+4
source share
2 answers

First of all, I hope you understand what you mean when you say "Fancybox iFrame", which means that you open an external html / php file using the fancybox iframe option, or setting it as a class inside your link like:

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

(I assume that you are using fancybox v2.x because the parameters are in your script) ... or as an option in your user script:

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

Secondly, you should beware that the fancybox v1.3.x and v2.x options are incompatible with each other. For example, you use fitToView (fancybox v2.x) and autoScale (v1.3.x) in your script. If you are really using fancybox v2.x, autoScale will not be recognized.

Thirdly, resize() not an option for fancybox v1.3.x or v2.x. If you are using v2.x, it is better to use $.fancybox.update()

Finally, the only possible (if I say the easiest) way that I consider “auto” is resizing fancybox when opened in iframe mode:

  • you must have control over the external.html page that you want to open (you must own it and end up working in the same domain) so that you can add elements that fancybox will need to change. Other pages that are not yours ( picssel.com for example) will not allow you to automatically resize the iframe automatically (you can resize manually, but I don't think the idea is.)
  • you must use fancybox at least 2.0.6 +

How to?

Modify the external.html file and set the size of the <html> , for example

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

(you can assign the height property only)

Then use the beforeShow callback parameter to get the size from the iframe , for example:

  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 out fooobar.com/questions/1417346 / ... sample code that also contains DEMO.

+18
source

I know this is an old thread, but I'm sure it will help other people who will land here. Even if you have no control over the contents of the iframe, leaving the fitToView parameter in its default value ( true ) and calling the Fancybox update() method when resizing the window:

$(window).resize(function() { $.fancybox.update(); }); However, if you also display other content (e.g. pdf images, etc.), Fancybox will automatically fit them to the screen size. In this case, you can, of course, initialize fancybox for iframes and images with various parameters.

+1
source

More articles:


All Articles