Trouver les dimensions réelles d'une imageRésolu

Question

Bonjour

Je suis en train de développer une galerie d'images. Quand on clique sur une image, celle-ci s'ouvre dans un cadre. Il y a un bouton "Image suivante" pour faire défiler. Ce bouton appelle la fonction : 

function suivant () {
    num_diapo++;
    document.getElementById("imgZoom").style.width = document.getElementById("img" + (num_diapo % nb_diapo)).width;
    document.getElementById("imgZoom").style.height = document.getElementById("img" + (num_diapo % nb_diapo)).height;
    document.getElementById("imgZoom").src = document.getElementById("img" + (num_diapo % nb_diapo)).src;
}

Le bouton fait bien défiler les images mais je ne récupère que les dimensions de la vignette affichée. Le problème est que c'est des dimensions réelles de l'image que j'ai besoin.
Est-ce possible avec du JS?

Merci d'avance

maelob · Accepted Answer

Bonjour,

A mon avis il faudrait que tu charges d'abord l'image dans la div et après tu appliques les styles et la tu fais le contraire.
Enfin si j'ai bien cerné le problème.

De rien ;-)

<hr size="2" width="100%" />
Maelo ou Elo --> Mon blog

Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)

cs_bultez · Answer

Bonjour,
si tu ne mets pas de with et de height, l'image s'affiche 
automatiquement avec la taille "qu'elle a".
à priori, si j'ai compris ce que tu veux, supprime ce qu'il faut dans le style et ne fais rien.

<hr />                Cordialement             Bul         [mon Site]     [M'écrire]

maelob · Answer

Battue par 4 secondes.

<hr size="2" width="100%" />
Maelo ou Elo --> Mon blog

Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)

cs_bultez · Answer

alors maelob, là, ça va être au moins du 4ème degré !!!!    
>>Battue de 4 secondes
c'est parce  que FF est maintenant mon navigateur par défaut    
<hr />                Cordialement             Bul         [mon Site]     [M'écrire]

maelob · Answer

Forcement vu la lenteur de notre cher internet explorer  par rapport à notre tout nouveau tout beau ff3 (tiens d'ailleurs adept ne m'a demandé de le mettre à jour je dois toujours avoir la rc3, je pense c'est pour ça que tu m'as battu lol)

Excuse nous de pourrir ton post ov3rdoze. 
<hr size="2" width="100%" />
Maelo ou Elo --> Mon blog

Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)

cs_ov3rdoze · Answer

Aucun problème. Mais je te conseille Opera si tu veux battre FF...

Pour revenir au sujet :
En fait j'ai essayé de ne rien mettre mais ça pose 2 problèmes :
 - Certaines images sont plus grandes que l'écran et dans ce cas-là je mets une dimension différente.
 - J'utilise les dimensions pour centrer le cadre.

Mais bon, mis-à-part le problème des images trop grandes, la solution de Maelob fonctionne très bien.

Merci

maelob · Answer

Après tu peux faire des test avec availHeight et availWidth pour voir si l'image "sort" de l'écran.

<hr size="2" width="100%" />
Maelo ou Elo --> Mon blog

Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)

cs_ov3rdoze · Answer

Effectivement je viens de m'apercevoir que ça résoud aussi le problème des grandes images, puisque je récupère la taille réelle.

cs_ov3rdoze · Answer

Ben en fait ça a pas tout résolu :
Tant que je ne fait défiler que des images plus petites que l'écran, je n'ai pas besoin de leur affecter une valeur à width et height. Par contre si une des images est trop grande, je donne des valeurs à ces paramètres de façon à ce que l'image ne dépasse pas.

Le problème est qu'une fois ces valeurs attribuées, quand l'image suivante remplace l'image actuelle, elle à déjà des valeurs width et height affectées. --> Le cacul de l'emplacement dans l'écran se fait avec les mauvaises valeurs.

En mettant, dans le cas où l'image soit plus petite que l'écran, auto dans les 2 paramètres, seule l'image immédiatement après une trop grande pose problème. Pour les autres c'est bon.

Je ne comprend pas pourquoi...

maelob · Answer

C'est pour ça que je disais d'affecter l'image à la div et après de tester les tailles.

<hr size="2" width="100%" />
Maelo ou Elo --> Mon blog

Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)

cs_ov3rdoze · Answer

C'est ce que je fais. Le truc c'est que quand je passe à l'image d'après, seul le paramètre src de la balise img est modifié. Du coup la nouvelle image est affichée avec le paramètre style donné à celle d'avant.
Tant qu'aucune valeur n'est afféctée à width et height, aucun problème, je récupère les dimensions réelles. Mais si j'affecte une valeur, celle-ci reste.

En fait il faudrait "supprimer" ces paramètres à chaque nouvelle image, et ne leur affecter une nouvelle valeur que si c'est indispensable. J'ai essayé de les mettre à null, ou à "", mais ça ne passe pas.

Je suis pas sûr que mes explications soient très claires...

cs_ov3rdoze · Answer

J'ai résolu (salement) le poblème : J'ai mis un booléen pour dire si l'image précédente est "trop grande", et dans ce cas je modifie la balise entière.

Merci pour votre aide

maelob · Answer

function suivant () {
    num_diapo++;
    document.getElementById("imgZoom").src = document.getElementById("img" + (num_diapo % nb_diapo)).src;//affection de l'image

//tests
    if (

document.getElementById("img" + (num_diapo % nb_diapo)).availWidth > screen.availWidth)


    
document.getElementById("imgZoom").style.width = document.getElementById("img" + (num_diapo % nb_diapo)).width; //affection du width si necessaire
    if (

document.getElementById("img" + (num_diapo % nb_diapo)).availHeight > screen.availHeight)



    document.getElementById("imgZoom").style.height = document.getElementById("img" + (num_diapo % nb_diapo)).height;

//affection du height si necessaire



}




Je vois pas ou est le problème???!!!
<hr size="2" width="100%" />
Maelo ou Elo --> Mon blog

Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)

cs_ov3rdoze · Answer

On est d'accord sur le code...

Mais si j'appelle suivant et que l'image suivante est trop grande, je vais affecter une valeur à width et/ou à height. Jusque-là aucun problème.

J'appelle à nouveau suivant :

      num_diapo++;
      document.getElementById("imgZoom").src = document.getElementById("img" + (num_diapo % nb_diapo)).src;/
/affection de l'image

La nouvelle image est affichée. Mais quelles que soient ses dimensions réelles, le test sur les dimensions va se faire avec les dimensions affectées précédemment (car elles restent après l'affectation de l'image), et pas avec les dimensions réelles.

cs_bultez · Answer

met style.width='', style.height=''
met à jour le src
ça doit le faire.
<hr />                Cordialement             Bul         [mon Site]     [M'écrire]

maelob · Answer

document.getElementById("img" + (num_diapo % nb_diapo)).height;

//affection du height si necessaire



 document.getElementById("img" + (num_diapo % nb_diapo)).width; //affection du width si necessaire

D'ailleurs il manque le style ici.



<hr size="2" width="100%" />

Maelo ou Elo --> Mon blog

Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)

cs_ov3rdoze · Answer

Bultez : 
J'ai essayé, c'est vrai que ça semble logique. Mais comme après je fais un calcul dans lequel j'utilise les valeurs width et height, "" fait une erreur. Bizarrement auto n'en fait pas.

Je crois que je vais garder ma solution sale.

Merci encore pour votre aide.

cs_bultez · Answer

il faut réutiliser ( j'ai oublié ! ) offsetHeight ou clientHeight ( et Width )
ch'tit coup d'oeil ici
<hr />                Cordialement             Bul         [mon Site]     [M'écrire]

cs_ov3rdoze · Answer

Je ne connaissais pas offsetHeight. Ca vaut peut-être le coup de chercher encore un peu, alors...
Je vous tiens au courant de l'évolution.

Trouver les dimensions réelles d'une image

19 réponses

Votre réponse

Discussions similaires