Bonjour à tous,

J'utilisais jusqu'à présent Colorbox pour afficher en grand une image dont la miniature était visible sur ma page (utilisation classique). Aujourd'hui je travaille à modifier ce code pour faire en sorte d'afficher du html dans la popup colorbox, qui contient non seulement mon image, mais aussi d'autres éléments.

Je me heurtais à un premier problème : colorbox affichait immédiatement le code sans attendre le chargement de l'image. Or, n'ayant pas le moyen de connaître facilement les tailles de mes images, je ne les précise pas dans mon élément img. Du coup il dimensionnait la fenêtre comme si l'image n'y était pas.

Pour contourner ce problème, j'effectue aujourd'hui un resize dans le onComplete de colorbox. Mais celui-ci ne s'effectue pas correctement, et seule la hauteur est redimensionnée.

Source : http://7avoir.yosko.net/sandbox/

Extrait javascript :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
$(".img_thumb").each(function(){ 
    $(this).colorbox({
        html:function(){ 
            return "DU HTML QUELCONQUE" +
            '<div><img src="' + this.name + '" /><div>';
        },
        onComplete:function(){
            $(this).colorbox.resize();
        }
    });
});
Une idée de la raison pour laquelle la largeur n'est pas redimensionnée ?

D'avance merci pour votre aide.