Zunächst hoffe ich, dass Sie verstehen, was Sie mit "Fancybox iFrame" meinen. Das bedeutet, dass Sie eine externe html/php-Datei mit der Fancybox-Option öffnen iframe
entweder die Einstellung als class
innerhalb Ihres Links wie :
<a href="external.html" class="fancybox fancybox.iframe">open external file in fancybox</a>
(Ich gehe davon aus, dass Sie fancybox v2.x verwenden, weil die Optionen in Ihrem Skript) ... oder als eine Option innerhalb Ihres benutzerdefinierten Skripts:
$(".fancybox").fancybox({
width: 620, // or whatever
heigh: 320,
type: "iframe"
});
Zweitens müssen Sie darauf achten, dass die Optionen für fancybox v1.3.x
y v2.x
sind nicht miteinander vereinbar. Zum Beispiel verwenden Sie in Ihrem Skript fitToView
(fancybox v2.x) und autoScale
(v1.3.x). Wenn Sie wirklich fancybox v2.x verwenden, autoScale
wird nicht anerkannt.
Drittens, resize()
ist weder eine Option für fancybox v1.3.x noch für v2.x. Wenn Sie v2.x verwenden, sollten Sie lieber $.fancybox.update()
Zuletzt, die einzig mögliche (sollte ich sagen, die "einfachste") Weise, die ich denke, um "auto" Größe fancybox, wenn in geöffnet iframe
Modus ist:
- sollten Sie die Kontrolle über die
external.html
Seite, die Sie öffnen möchten (Sie sollten sie besitzen und eventuell in derselben Domäne ausführen), damit Sie die Elemente hinzufügen können, die Fancybox zur Größenänderung benötigt. Andere Seiten, die nicht Ihnen gehören ( picssel.com
zum Beispiel) erlaubt es Ihnen nicht, die Größe des iframe automatisch zu ändern (Sie könnten die Größe manuell ändern, aber ich glaube nicht, dass das die Idee ist).
- Sie sollten Fancybox mindestens in der Version 2.0.6+ verwenden
Wie?
Bearbeiten Sie Ihr external.html
Datei und setzen Sie die Abmessungen auf den <html>
Tag wie
<html lang="en" style="width: 800px; height: 400px;">
(möglicherweise möchten Sie die height
allerdings nur als Eigenschaft)
Verwenden Sie dann die Rückrufoption beforeShow
um die Dimension aus der iframe
mögen:
beforeShow: function(){
this.width = $('.fancybox-iframe').contents().find('html').width();
this.height = $('.fancybox-iframe').contents().find('html').height();
}
auch, fitToView
sollte eingestellt werden auf false
Siehe https://stackoverflow.com/a/10776520/1055987 für einen Beispielcode, der auch eine DEMO enthält.