4 Stimmen

Automatische Höhenanpassung in Fancybox

In dem Bestreben, andere Beiträge nicht zu übernehmen, habe ich beschlossen, meinen eigenen Beitrag zu schreiben. Ich habe tagelang herumprobiert und kann nicht herausfinden, wie man die Höhe der Fancybox iFrame passt die Größe automatisch an den Inhalt an. Hier ist, wie ich es nenne:

<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>

Ich dachte, dass die Einstellung einer minHeight und autoScale würde es tun, aber es hat nicht. Und mit resize(); tut nichts.

Vielen Dank an alle!

19voto

JFK Punkte 40703

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.

2voto

Marventus Punkte 854

Ich weiß, dass dies ein altes Thema ist, aber ich bin mir sicher, dass es anderen Menschen, die hier landen, helfen wird. Auch wenn Sie keine Kontrolle über den Iframe-Inhalt haben, können Sie durch Verlassen des fitToView mit seinem Standardwert ( true ) und den Aufruf der Fancybox update() Methode bei der Größenänderung des Fensters:

$(window).resize(function() { $.fancybox.update(); }); Wenn Sie jedoch auch andere Inhalte anzeigen (z. B. Bilder, PDF-Dateien usw.), passt Fancybox diese automatisch an die Größe des Bildschirms an. In diesem Fall können Sie natürlich Fancybox für Iframes und Bilder mit unterschiedlichen Parametern initialisieren.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X