Trouver les dimensions réelles d'une image [Résolu]

cs_ov3rdoze 414 Messages postés lundi 19 juillet 2004Date d'inscription 23 septembre 2014 Dernière intervention - 23 juin 2008 à 14:20 - Dernière réponse : cs_ov3rdoze 414 Messages postés lundi 19 juillet 2004Date d'inscription 23 septembre 2014 Dernière intervention
- 24 juin 2008 à 10:02
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
Afficher la suite 

Votre réponse

19 réponses

Meilleure réponse
maelob 944 Messages postés mardi 14 novembre 2006Date d'inscription 7 août 2009 Dernière intervention - 23 juin 2008 à 14:44
3
Merci
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)

Merci maelob 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 69 internautes ce mois-ci

Commenter la réponse de maelob
cs_bultez 13619 Messages postés jeudi 13 février 2003Date d'inscription 15 octobre 2013 Dernière intervention - 23 juin 2008 à 14:44
0
Merci
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]
Commenter la réponse de cs_bultez
maelob 944 Messages postés mardi 14 novembre 2006Date d'inscription 7 août 2009 Dernière intervention - 23 juin 2008 à 14:45
0
Merci
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)
Commenter la réponse de maelob
cs_bultez 13619 Messages postés jeudi 13 février 2003Date d'inscription 15 octobre 2013 Dernière intervention - 23 juin 2008 à 14:49
0
Merci
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]
Commenter la réponse de cs_bultez
maelob 944 Messages postés mardi 14 novembre 2006Date d'inscription 7 août 2009 Dernière intervention - 23 juin 2008 à 14:55
0
Merci
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)
Commenter la réponse de maelob
cs_ov3rdoze 414 Messages postés lundi 19 juillet 2004Date d'inscription 23 septembre 2014 Dernière intervention - 23 juin 2008 à 14:59
0
Merci
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
Commenter la réponse de cs_ov3rdoze
maelob 944 Messages postés mardi 14 novembre 2006Date d'inscription 7 août 2009 Dernière intervention - 23 juin 2008 à 15:04
0
Merci
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)
Commenter la réponse de maelob
cs_ov3rdoze 414 Messages postés lundi 19 juillet 2004Date d'inscription 23 septembre 2014 Dernière intervention - 23 juin 2008 à 15:08
0
Merci
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.
Commenter la réponse de cs_ov3rdoze
cs_ov3rdoze 414 Messages postés lundi 19 juillet 2004Date d'inscription 23 septembre 2014 Dernière intervention - 23 juin 2008 à 16:28
0
Merci
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...
Commenter la réponse de cs_ov3rdoze
maelob 944 Messages postés mardi 14 novembre 2006Date d'inscription 7 août 2009 Dernière intervention - 23 juin 2008 à 16:31
0
Merci
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)
Commenter la réponse de maelob
cs_ov3rdoze 414 Messages postés lundi 19 juillet 2004Date d'inscription 23 septembre 2014 Dernière intervention - 23 juin 2008 à 16:40
0
Merci
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...
Commenter la réponse de cs_ov3rdoze
cs_ov3rdoze 414 Messages postés lundi 19 juillet 2004Date d'inscription 23 septembre 2014 Dernière intervention - 23 juin 2008 à 16:46
0
Merci
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
Commenter la réponse de cs_ov3rdoze
maelob 944 Messages postés mardi 14 novembre 2006Date d'inscription 7 août 2009 Dernière intervention - 23 juin 2008 à 16:48
0
Merci
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)
Commenter la réponse de maelob
cs_ov3rdoze 414 Messages postés lundi 19 juillet 2004Date d'inscription 23 septembre 2014 Dernière intervention - 24 juin 2008 à 08:56
0
Merci
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.
Commenter la réponse de cs_ov3rdoze
cs_bultez 13619 Messages postés jeudi 13 février 2003Date d'inscription 15 octobre 2013 Dernière intervention - 24 juin 2008 à 09:18
0
Merci
met style.width='', style.height=''
met à jour le src
ça doit le faire.
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Commenter la réponse de cs_bultez
maelob 944 Messages postés mardi 14 novembre 2006Date d'inscription 7 août 2009 Dernière intervention - 24 juin 2008 à 09:20
0
Merci
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)
Commenter la réponse de maelob
cs_ov3rdoze 414 Messages postés lundi 19 juillet 2004Date d'inscription 23 septembre 2014 Dernière intervention - 24 juin 2008 à 09:31
0
Merci
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.
Commenter la réponse de cs_ov3rdoze
cs_bultez 13619 Messages postés jeudi 13 février 2003Date d'inscription 15 octobre 2013 Dernière intervention - 24 juin 2008 à 09:47
0
Merci
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]
Commenter la réponse de cs_bultez
cs_ov3rdoze 414 Messages postés lundi 19 juillet 2004Date d'inscription 23 septembre 2014 Dernière intervention - 24 juin 2008 à 10:02
0
Merci
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.
Commenter la réponse de cs_ov3rdoze

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.