Galerie photo avec JavaScript &Jquery ne passe pas sur IE

Bonjour à tous,

J'ai suivi le tutoriel ...tant bien que mal, puis, j'ai utilisé la modif effectuée par sarahdel88 , puisque je souhaite aussi adjoindre un texte de légende à chaque visuel.

J'arrive après de longue nuiiiiit blanche a un résultat visuellement satisfaisant sur firefox, opéra et chrome mais, Oh malheur de mon incompétence en javascript, IE me fait l'enfer : les photos de grande taille ne sont plus homothétiques (elles prennent la dimension de la photo 1, photo par défaut) et je n'arrive pas à me débarrasser du visuel de chargement (loader.gif) à défaut de le faire correctement fonctionner.

Je vois déjà Florent qui va me dire de me plonger dans javascript... ... pas tort, mais dans l'urgence, si l'un d'entre vous peut m'aider... ce ne sera que du bonheur !!!

Le visu de mon problème : http://www.matho.fr/cati/mde.html

Merci d'avance

Bonjour à tous,

Personnes pour me mettre sur la voie ????
Est ce que si j'insère du code cela vous permettra plus facilement de m'aider ?

F1 F1 F1...

Merci d'avance

Hello à tous,

Personnes pour m'aider ??? ... mayday mayday

En résumé, sur IE 8 mes images : les 2,3,4,5,6,7,8 et 9 de chaque galerie prennent les valeurs width et height de l'image 1 (image par défaut). Sur firefox chrome et opéra tout est nickel...

et mon fichier loader.gif reste affiché sous forme d'image inconnue.

J'ai vraiment besoin d'un coup de main SVP
Merci d'avance

Bonjour

Je suis arrivé a récupéré des taille en imposant height et width auto a l'attribut img dans le css.
Par contre je n'arrive pas a positionner le loader.gif correctement.

Quelqu'un as t'il une idée ?

Merci d'avance

Pour info, sur la page de test, une fois les scripts chargés et les modifications du DOM faite, tu as deux <p id="viewer">.

Pour positionner le loader.gif, tu veux le placer à peu près au centre de l'image lors des changements? Pour ça, tu peux positionner #bigpic (généré au chargement de la page) en relatif, lui donner une largeur tant qu'à faire, et positionner #bigpic .loader en absolu (top:45%;left:160px; ou quelque chose du genre). Il faudra sans doute jouer avec les z-index pour controler l'empilement des éléments.

Bonjour à tous,

Mille merci Florent pour cette intervention...

Oui j'avais bien remarqué, avec "les outils de développement" intégrés à IE 8 cette erreur sur la double présence de <p id="viewer">. Je l'ai donc simplement supprimé du code html puisqu'à priori elle est générée par le script et... cela fonctionne sans.


Concernant le loader : dans le mille ta solution, j'ai pas tout compris pour créer un #bigpic en relatif puisqu'en suivant "tes conseil" je me retrouve avec un doublon de <div id="bigpic">, au même titre que pour le p id="viewer" ci dessus.
Par contre le #bigpic .loader comme tu l'as indiqué fonctionne a merveille.

Je suppose que mes lignes #viewer et #bigpic de mon css se font concurrence :

#viewer {
	position:relative;
	width:340px;
	margin:5px 0px 0px 10px!important;
	margin:5px 0px 0px 10px;
	z-index: 2;
	text-decoration: none;
}
/*La ligne suivante ressemble bien a celle de #bigpic .loader mais cela fonctionne sans*/
/*#viewer img[src*="loader"] {position:absolute; right:80%; top:80%; margin:-15px 0 0 -15px;}*/

/*Ligne créée dans l'esprit de la proposition de Florent mais identique a celle de #viewer donc supprimer*/
/*#bigpic {position:relative;	width:340px;margin:5px 0px 0px 10px!important;   /*Pour autre que IE */	/*margin:5px 0px 0px 10px;z-index:2}*/
/*---------------------------------------------------------*/
#bigpic .loader {
	position:absolute;
	top:40%;
	left:30%;
  margin:-15px 0 0 -15px;
	z-index: 0;
}  

Et là oups je nage... mais ouf ça marche sur IE 6 et 8, FF, Chrome et Opéra...
Dois remplacer la notion de viewer par celle de bigpic ?
Si quelqu'un à une idée ? je suis preneur

Merci d'avance.

4zam a écrit :
Dois remplacer la notion de viewer par celle de bigpic ?

Euh... là c'est moi qui nage. Entre le code CSS de départ donné dans le tutoriel, tes propres modifications, et les bouts de code que je t'ai suggéré, alors oui il y très probablement des doublons ou des choses qui se contredisent.

La solution n'est pas de «remplacer» une «notion» par une autre (je rappelle que ce forum parle de technologies web, pas de philosophie ), mais de comprendre le code qu'on utilise et de l'analyser pour:
- éliminer les codes redondants ou inutiles;
- corriger ce qui doit l'être en cas d'erreur.

Pas de recette magique pour ça, ça demande des connaissances et de l'expérience.