jQuery Fancybox n'attend pas le chargement du contenu AJAX avant de déterminer ses dimensions

Question

J'utilise Fancybox pour charger du contenu avec AJAX.

Contenu:

<div class="container"> 
    <h2>An image</h2> 
    <div class="span-16 colborder center clearfix"> 
    <img src="/system/images/apple.jpg"> 
    </div> 

    <div class="span-7 last clearfix"> 
    something here 
    <br> 
    something here 
    </div> 
    <div class="span-24 last"> 
    FOOTER FOOTER FOOTER 
    </div> 
</div> 

JS:

$('a.edit-image').fancybox({ 
    'autoScale' : false, 
    'scrolling' : 'no' 
    }); 

Les charges de contenu, mais le Fancybox rend seulement avec une hauteur pour accueillir le texte, laissant l'image déborde sur le fond . L'image (qui peut être assez volumineuse) prend un moment à charger et je pense que Fancybox n'attend pas pour déterminer la hauteur qu'elle devrait rendre.

Le fait de placer l'image ailleurs sur la page (sous forme de préchargement) prévient le bug. En outre, il ne se produit que la première fois que le Fancybox est ouvert car il est mis en cache à chaque fois par la suite.

Quelqu'un sait-il la façon la moins hactique de rendre Fancybox à la bonne hauteur, ou juste de régler sa hauteur sur 'auto'?

Merci!

Answer 1

J'ai ajouté un déclencheur sur l'événement resize de la div .container qui ajustait la taille de la div fancybox-content. Cela a fait le travail.

Answer 2

Vous pouvez simplement utiliser la méthode de mise à jour pour redimensionner fancybox une fois que votre contenu AJAX est chargé.

$.fancybox.update();