Galerie javascript pb sur safari

J'ai inséré la galerie javascript http://css.alsacreations.com/Tutoriels-JavaScript/galerie-photo-javascript
dans mon site. Sur mac firefox, opera, ça va. Je n'ai pas encore testé sur pc mais sur safari j'ai un pb avec l'affichage de la grande image :

J'ai deux types d'images, horizontales et verticales.
Lorsque on clique sur la vignette d'une image hoizontael il n'y a pas de problème. Par contre si on clique ensuite sur une vignette d'image verticale, l'image qui s'affiche est deformée. C'est à dire redimensionné automatiquement à la taille verticale.

Pouvez vous m'aider? Je ne suis pas très forte en javascript.

Voici le lien vers le site en construction
http://jcsarraz.free.fr/SITEJC2007/agathe.php

Merci

Bonjour à tous,

Je profite de ce message , pour me présenter, voilà, ben , je ne sais pas trop raconter: ...je me suis mis à réaliser quelques petits sites depuis 2 ans, j'apprends souvent pleins de chose sur le site d'Alsacréation, d'ailleurs mon apprentissage du css se fait aussi grâce au livre de R. Goetter. J'essaye d'avoir un code le plus propre et efficace possible, mais c'est pas toujours facile.

Aujourd'hui je suis face à un problème, dont je n'arrrive pas à trouver la solution, et c'est le même que pavito.

J'utilise la galerie photo javascript, sans modif (à part un onmouseover en plus), et suis confronté uniquement sur safari au problème suivant:
Si une image est de largeur inférieur à la précédente, elle est automatiquement étiré pour faire la même taille que la précédente et cela si et seulement si la hauteur est identique.
Car si entre une image 1 et une image 2 la largeur et la hauteur diffère alors pas de souci de redimensionnement.

Vous pouvez jetez un coup d'oeil sur http://www.crespeauphoto.fr dans la rubrique concert. ( avec safari bien sûr), pour voir le problème.

Sinon si quelqu'un connait le problème , tant mieux. il pourra m'aiguiller pour corriger le tir.
Sinon je ne pense pas que cela viennent du fichier CSS, mais je le poste dans un second message, peut-être dans le script js... mais je ne suis pas un expert en javascript.
Merci beaucoup d'avance à tous pour votre contribution et bonne journée.
Modifié par cyrus (05 Sep 2007 - 13:58)

Salut,

En regardant le code du tuto, on voit qu'il n'y a aucune instruction concernant le dimensionnement des images, que ce soit dans la partie CSS ou dans la partie JS.

Je n'ai pas Safari donc je ne pourrais t'être d'un grand secours mais, ayant dû rendre un menu compatible avec ce navigateur, je me suis aperçu qu'il avait des problèmes dans la gestion du cache.

Aussi, sans être sûr du résultat, tu peux essayer de passer tes fichiers en php en y ajoutant des instructions comme quoi il ne faut pas les mettre en cache.

Pour ton fichier css, ça donne :

<link rel="stylesheet" type="text/css" media="screen, projection" href="style.css.php" />

avec, dans style.css.php :

<?php

header("Pragma: no-cache");
header("Expires: 0");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Content-type: text/css; charset=iso-8859-1");

?>

/* puis ton code css */

Pour ton fichier JS :

<script type="text/javascript" src="script.js.php" />

avec, dans script.js.php :

<?php

header("Pragma: no-cache");
header("Expires: 0");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Content-type: text/javascript; charset=iso-8859-1");

?>

/* puis ton code js */

Je ne t'assure pas que ça va marcher mais j'ai déjà résolu un problème de la sorte.

re,
Merci pour cette piste, mais malgré tous mes espoirs, après modification des codes sources, pas de changement.
Par contre cela m'a néanmois motivé pour persister dans mes recherches.
Et ouf, c'est OK, j'ai trouvé la modification à effectuer pour rendre le script compatible sous safari, pour des images, n'ayant pas la même largeur:
Ajouter la propriété display:block; pour l'identificateur #big_pict qu'il convient de rajouter à la suite:

a écrit :
ul#galerie_mini{
margin: 0 ;
padding: 12px 0px 0px 15px;
list-style-type: none ;
width:120px;
}

ul#galerie_mini li{
float: left ;
}

ul#galerie_mini li a img{
margin: 2px 3px ;
border: 1px solid #dcb ;
}

dl#photo{
clear: both ;
margin: 0px auto ;
}

dl#photo dt{
font: 1em Verdana, serif ;
color: #fff;
text-align:right;
}

dl#photo dd{
margin: 0 ;
}

dl#photo img{
border: 0px solid #dcb ;
}

#big_pict{
display:block;
}

merci encore à toi (Koala64) pour ton coup de pouce
A+

Ah ! bien... J'étais parti trop loin... Pour une fois que ce n'est pas trop tordu comme bug !
C'est que j'adore Safarÿ.