18041 sujets

Questions générales et questions de débutants

[Résolu] Galerie d'images... je n'arrive pas à refaire l'exemple

Bonjour à toutes et à tous,

j'aurais besoin de créer une galerie d'images, et pour cela, je suis allée voir un tuto intitulé "Galerie photo avec JavaScript" (lien: http://www.alsacreations.com/tuto/lire/557-galerie-photo-javascript.html ).
J'ai essayé de refaire l'exercice proposé avec mes propres photos, mais je n'ai pas réussi à franchir les 1ères étapes de structuration de la page en xhtml et de mise en forme en css (avant même d'aborder la partie en javasript !). En effet, lorsque je veux tester ce premier résultat, ça ne marche pas car les photos s'affichent dans d'autres fenêtres au lieu de s'afficher sur la même page, à coté des images en petit format.

Voici le code que j'ai écrit : 

<!-- dans la partie head-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

<style type="text/css"> 

body { margin:0; padding:0; font:0.9em Georgia, serif;}
h1 { margin:15px 10px; text-decoration:underline; color:#dcb;}
p { line-height:1.5em; text-indent:1em; margin:15px 10px;}

div#galerie { width:450px; background-color:#FFF; border:1px solid #F69; padding:15px; margin: 15px 30px; text-align:left;} 

ul#galerie_mini { margin:0; padding:0; list-style-type:none;} 

ul#galerie_mini li { float:left;} 

ul#galerie_mini li a img { margin:5px 10px;} 

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

dl#photo dd { margin:0;} 

dl#photo dt { font-style:italic 9px arial; color:#000;} 

dl#photo img { border: 2px solid #FCC;}

</style>

<title>Test - Galerie d'images</title>
</head>


<!-- dans la partie body-->
<body> 

<!-- galerie d'images en petit format-->
<div id="galerie">

   <ul id="galerie_mini">
     <li><a href="medias/product-gd-vignette-1.gif"><img src="medias/product-pt-vignette-1.gif" width="84px" height="84px" alt="" /></a></li>
     <li><a href="medias/product-gd-vignette-2.gif"><img src="medias/product-pt-vignette-2.gif" width="84px" height="84px" alt="" /></a></li> 
     <li><a href="medias/product-gd-vignette-3.gif"><img src="medias/product-pt-vignette-3.gif" width="84px" height="84px" alt="" /></a></li> 
     <li><a href="medias/product-gd-vignette-4.gif"><img src="medias/product-pt-vignette-4.gif" width="84px" height="84px" alt="" /></a></li>
     <li><a href="medias/product-gd-vignette-5.gif"><img src="medias/product-pt-vignette-5.gif" width="84px" height="84px" alt="" /></a></li> 
  </ul>

<!-- image en grand format-->
 
<dl id="photo">
  <dd><img id="big_pict" src="medias/product-gd-vignette-1.gif" alt="Photo 1 en taille normale" /></dd> 
  <dt>Légende de la photo 1</dt>
</dl>

</div>
 

</body>
</html>


J'ai gardé ce qui était dans l'exercice:
<dd><img id="big_pict" src="images/photo1.png" alt="Photo 1 en taille normale" /></dd>

À ce sujet, je ne sait pas à quoi correspond exactement [id="big_pict"], je n'ai rien trouvé dans le reste du code qui s'y rapporte (est-ce normal ?).

J'ai juste adapté cette ligne en mettant ma 1ère photo en grand format intitulée "product-gd-vignette-1.gif" qui est dans mon dossier "medias" :
<dd><img id="big_pict" src="medias/product-gd-vignette-1.gif" alt="Photo 1 en taille normale" /></dd>

Je pense que c'est dans cette partie du code que cela ne va pas, mais je ne sais quoi exactement. Est-ce que quelqu'un pourrait m'aider à comprendre ?

Merci d'avance de votre aide car je suis bloquée,
cordialement.
Modifié par Florent V. (18 Apr 2010 - 00:00)
Bonjour,

alex100dra a écrit :
En effet, lorsque je veux tester ce premier résultat, ça ne marche pas car les photos s'affichent dans d'autres fenêtres au lieu de s'afficher sur la même page, à coté des images en petit format.

C'est justement ça le résultat attendu pour cette première étape (sans JavaScript).
Donc tout va bien.

alex100dra a écrit :
je ne sait pas à quoi correspond exactement [id="big_pict"]

C'est un identifiant. Conformément à la spécification HTML, c'est un identifiant unique dans la page qui permet d'appliquer des styles (CSS) a l'élément ou de le manipuler avec un script (JavaScript). Dans le code JavaScript, que je n'ai plus en tête, on a probablement un document.getElementById("big_pict").

En passant, pour éviter des problèmes de rendu avec Internet Explorer, il faut éviter de placer des commentaires ou d'autres contenus avant le Doctype dans ton code HTML.
Modifié par Florent V. (18 Apr 2010 - 00:01)
Bonjour Florent et merci beaucoup pour ta réactivité et tes explications. Cela me rassure et me motive pour continuer la dernière partie de l'exercice en JS.
Bonne journée et merci encore.
Merci beaucoup Florent de m'avoir aidé à avancer, ça marche presque... les photos changent bien à l'intérieur la même page lorsqu'on clique dessus, mais la légende elle ne varie pas. En effet, c'est toujours la même et le texte qui s'affiche est "Légende de la photo 1", même quand on clique sur la photo n°3 !

Voici mon code dans ma page xhtml:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

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

div#galerie { width:450px; background-color:#FFF; border:1px solid #F69; padding:15px; margin: 15px 30px;} 

ul#galerie_mini { margin:0; padding:0; list-style-type:none;} 

ul#galerie_mini li { float:left;} 

ul#galerie_mini li a img { margin:5px 10px;} 


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

dl#photo dd { margin:0;} 

dl#photo dt { margin:0; text-align:left; font-family:Arial; font-size:10px; color:#000;} 

dl#photo img { border: 1px solid #FCC;}

</style>

<title>Test - Galerie d'images</title>
</head>


<body> 

<div id="galerie">

   <ul id="galerie_mini">
     <li><a href="medias/product-gd-vignette-1.gif"><img src="medias/product-pt-vignette-1.gif" width="84px" height="84px" alt="Légende de la photo 1" /></a></li>
     <li><a href="medias/product-gd-vignette-2.gif"><img src="medias/product-pt-vignette-2.gif" width="84px" height="84px" alt="Légende de la photo 2" /></a></li> 
     <li><a href="medias/product-gd-vignette-3.gif"><img src="medias/product-pt-vignette-3.gif" width="84px" height="84px" alt="Légende de la photo 3" /></a></li> 
     <li><a href="medias/product-gd-vignette-4.gif"><img src="medias/product-pt-vignette-4.gif" width="84px" height="84px" alt="Légende de la photo 4" /></a></li>
     <li><a href="medias/product-gd-vignette-5.gif"><img src="medias/product-pt-vignette-5.gif" width="84px" height="84px" alt="Légende de la photo 5" /></a></li> 
  </ul>

<dl id="photo">
  <dd><img id="big_pict" src="medias/product-gd-vignette-1.gif" alt="Photo 1 en taille normale" /></dd> 
  <dt>Légende de la photo 1</dt>
</dl>

</div>
 
</body>
</html>


Je joins également le code de mon code javaScript : 
 
unction displayPics() 
{ 
    var photos = document.getElementById('galerie_mini') ; 
    var liens = photos.getElementsByTagName('a') ; 
    var big_photo = document.getElementById('big_pict') ; 
    var titre_photo = document.getElementById('photo').getElementsByTagName('dt') [0] ; 
	
    for (var i = 0 ; i < liens.length ; ++i) {liens[i].onclick = function() {big_photo.src = this.href; big_photo.alt = this.title; titre_photo.firstChild.modeValue = this.title; return false;
};	  
} 
}
window.onload = displayPics;


Je ne sais pas d'où cela vient, j'ai pourtant bien comparé avec le code de l'exercice et je ne vois pas où est mon erreur. Smiley rolleyes Est-ce que quelqu'un pourrait m'aider à comprendre ?
Merci d'avance.
[/i]
Modifié par alex100dra (18 Apr 2010 - 18:43)
Je lis ce code dans ton message:
var titre_photo = document.getElementById('photo').getElementsByTagName('dt') [0]

Le but de cette ligne est de «récupérer» un élément HTML de la page bien précis, à savoir le DT qui contient la légende, pour pouvoir ensuite modifier le contenu (texte) de cet élément.

getElementById('photo') va retourner un seul élément, le DL qui porte l'identifiant "photo". À partir de là, on va récupérer tous les éléments DT qui sont à l'intérieur du DL. C'est à ça que sert le getElementsByTagName('dt').

Par contre, la méthode getElementsByTagName retourne un tableau d'éléments, qui peut être vide (pas d'éléments trouvés), contenir un seul élément (un seul DT trouvé), ou une série de plusieurs éléments. On va donc choisir le premier élément (indice 0) du tableau. En JavaScript cela se fait avec la syntaxe monTableau[0]. Attention, il ne doit pas y avoir d'espace entre monTableau et [0].
Et que vois-je dans ton code? Un espace entre getElementsByTagName('dt') et [0]. Il semblerait que l'erreur soit là. Smiley cligne
Bonjour Florent et merci de tes explications. Smiley smile
J'ai tenté ta solution d'enlever l'espace qu'il y avait entre ('dt') et [0] ( .getElementsByTagName('dt')[0] ), mais cela ne semble malheureusement pas suffire. J'ai voulu aussi ajouter monTabeau[0] comme tu l'avais écrit, mais cela me fait un message d'erreur dans mon fichier "script.js". Je ne parviens pas à trouver mon erreur et je suis toujours au point mort Smiley decu , dur, dur...
alex100dra a écrit :
J'ai voulu aussi ajouter monTabeau[0] comme tu l'avais écrit, mais cela me fait un message d'erreur dans mon fichier "script.js".

Normal, la variable monTableau n'existe pas dans ta page. Je donnais ce nom comme exemple, pas comme un code à reprendre tel quel.

alex100dra a écrit :
Je ne parviens pas à trouver mon erreur

Sans avoir la moindre notion de JavaScript, il va être difficile de la trouver.

Je donne quelques pistes pour apprendre JavaScript ici:
http://www.alsacreations.com/actu/lire/723-notes-tutoriel-galerie-jquery.html

Bonne continuation.
[résolu] Bonsoir Florent,

je pensais que cet exercice de galerie d'images était pour des débutants...
Cela dit, je vais sûrement suivre ton conseil et me mettre au JavaScript. Smiley murf
En attendant, comme j'avais vraiment besoin de résoudre cet exercice pour l'appliquer à un projet personnel, j'ai pu avoir les solutions suivantes que je partage et qui ont marché : Smiley biggrin

1) je me suis trompée en recopiant le code JavaScript : J'ai écrit "titre_photo.firstChild.modeValue = ... " au lieu de "titre_photo.firstChild.nodeValue = ... " (le n de nodeValue à la place du m)

2) au lieu de marquer 2 fois "this.title" (comme dans l'exercice), j'ai remplacé le 2ème "this.title" par "this.firstChild.alt" (alt étant l'attribut de mes images).

Voilà, j'espère que ces éléments pourront aider les grands débutants comme moi et merci encore. Smiley cligne
alex100dra a écrit :
je pensais que cet exercice de galerie d'images était pour des débutants...
Cela dit, je vais sûrement suivre ton conseil et me mettre au JavaScript. Smiley murf

Le tutoriel est tout à fait adapté aux personnes débutant en JavaScript. Smiley cligne

Heureux de voir que tu as réussi à corriger les erreurs restantes.
Sujet clos
Aller à