Fancybox iframe redimensionner dynamiquement

Après quelque temps, je suis toujours avoir des problèmes avec le redimensionnement de la hauteur de l'iframe dans FancyBox2.
J'appelle cela de mes parents:

$(document).ready(function() {
    $('.fancybox').fancybox();      
    $('.showframe').fancybox({
        openEffect : 'elastic',
        closeEffect : 'elastic',
        beforeShow: function(){
            this.width = ($('.fancybox-iframe').contents().find('body').width());
            this.height = ($('.fancybox-iframe').contents().find('body').height());
        }, 
        afterClose : function() {
            location.reload();
            return;
        },
        onUpdate : { autoHeight: true},
        helpers : {
            overlay : {closeClick: false}
        }
    });
});

Et il fonctionne correctement lorsque l'iframe est ouvert, mais dans l'iframe, j'ai un script qui permet aux utilisateurs de télécharger des images et afficher un aperçu des images téléchargées, de sorte que la hauteur de l'iframe modifications (selon le nombre de photos téléchargées), mais FancyBox ne sera pas "redimensionner la hauteur". J'utilise dans mon "enfant" de l'iframe pour déclencher redimensionner:

...some functions here that handle image upload and image display...
parent.$.fancybox.scrollBox();

Maintenant, cela ne fonctionne que dans Firefox, Chrome et IE afficher les barres de défilement au lieu de redimensionnement de l'iframe hauteur. Est-il un moyen de faire de la cross-browser compatible?

EDIT: j'obtiens ce code fonctionne dans tous les navigateurs:

parent.$('.fancybox-inner').height($('#wrap').height()+20);

mais le problème est que l'iframe ne centre (il suffit de redimensionner la hauteur, mais ne sera pas re-centre de l'écran). J'ai essayé parent.$.fancybox.center(); et parent.$.fancybox.reize(); et parent.$.fancybox.update(); et qu'est-ce-pas, mais qui ne fonctionne que sous Firefox.

J'ai trouvé (par pur hasard) que cela fonctionne dans tous les navigateurs (même IE8):

parent.$('.fancybox-inner').height($('#wrap').height()+30);
parent.$.fancybox.reposition();
  • essayez (à l'intérieur de la page enfant) en appelant la méthode parent.$.fancybox.update() après la taille a changé. Aussi, le format de onUpdate devrait être onUpdate : function(){ ... }; essayez de mettre ce paramètre à l'intérieur d'elle : this.height = $('.fancybox-iframe').contents().find('body').innerHeight();
InformationsquelleAutor Peter | 2013-01-14
  1. 2

    Heureux que vous avez trouvé votre réponse, et merci pour elle.
    Juste un conseil pour Fancybox 1.3.4 les utilisateurs, il est

    parent.$.fancybox.center();

    Si vous aussi vous souhaitez réajuster la largeur que vous avez pour redimensionner plusieurs divs. Mon redimensionner ressemble à ceci:

    //get iframe height and width
var current_height = document.getElementById('popup').offsetHeight;
var current_width = document.getElementById('popup').offsetWidth;

//resize height
parent.$('.fancybox-inner').height(current_height + 30);

//resize width
parent.$('#fancybox-outer').width(current_width + 30);
parent.$('#fancybox-wrap').width(current_width + 30);
parent.$('#fancybox-content').width(current_width + 30);
parent.$('.fancybox-inner').width(current_width + 30);

//center the thing - vertically and horizontally
parent.$.fancybox.center();
parent.$.fancybox.resize();

    Testé IE8+, Firefox, Chrome

    InformationsquelleAutor tabacitu