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.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…