Discussion :

[Yosko]

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.

[SpaceFrog]

il ne se base peut être pas sur le width de l'image ... ?

[Yosko]

Peut-être, mais dans ce cas je ne comprend pas pourquoi il le fait bien pour la hauteur.

Etant donné qu'il est possible de redimensionner à une taille précisée en paramètre, je me demande si je n'aurais pas un moyen, dans le onComplete, de redimensionner la boite en me basant sur la taille de son contenu (qui à ce moment là, est chargé).
Cela est-il possible en javascript/jquery ?

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(".img_thumb").each(function(){ 
    $(this).colorbox({
        html:function(){ 
            return "DU HTML QUELCONQUE" +
            '<div><img id="pic" src="' + this.name + '" /><div>';
        },
        onComplete:function(){
             h=$("#pic").height();
             w=$("#pic").width();
            //ici tu attribues le width et le height ...
           // $(this).colorbox.resize();
        }
    });
});

[Yosko]

C'est probablement parfait. N'ayant plus d'ordinateur sous la main, ayant perdu mon environnement de dev, je ne testerai pas ça avant la semaine prochaine. Je ferai un retour à ce moment là.

Dans tous les cas, merci de ton aide.