[résolu]Tutoriel Galerie Photos, rajouter un commentaire à chaque p

Bonjour,
Merci pour ce tutoriel très intéressant sur la galerie photo. Je trouve le script très séduisant... Mais oui.
Bien entendu, je souhaite aller plus loin.
Je souhaite pouvoir afficher un commentaire en face de chaque grande photo, sans qu'il se voit au niveau de galerie_mini.
Je pensais rajouter ce commentaire entre deux balises <label> auxquelles j'aurais mis un display:none.

Voici l'insertion dans le HTML en orange:

<div id="galerie">
<ul id="galerie_mini">
 <li><a href="P.jpg" title="Emma"><img src="Pm.jpg" alt="Emma" /></a>[#orange]<label>description1</label>[/#]</li>
 <li><a href="q.jpg" title="Nico"><img src="qm.jpg" alt="Nico" /></a>[#orange]<label>description2</label>[/#]</li>
              ...
              ...
</ul>
</div>
Pour la grande photo, de même j'ai rajouté un label commentaire:
<dl id="photo">
   <dt>Titre de la photo 1</dt>
      <dd><img id="big_pict" src="P.jpg" alt="Photo1" /></dd>[#orange]<label>COMMENTAIRE</label>[/#]

Dans Javascript, voici ce que j'ai fait en orange:

function displayPics()
{
var photos = document.getElementById('galerie_mini') ;	
[#orange]var comment = photos.getElementsByTagName('label') ;[/#]
var big_photo = document.getElementById('big_pict') ;
var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
[#orange]var label_photo = document.getElementById('photo').getElementsByTagName('label')[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.nodeValue = this.title;
    [#orange]label_photo.firstChild.nodeValue = comment\[i\].firstChild.nodeValue[/#]; 
    
    return false;
    }
}
window.onload = displayPics;	
}

Mais le script refuse

comment\[i\]

Par contre, si je prends n'importe quelle valeur pour i (0,1,2,etc inférieur au nombre de liens), cela marche pour le commentaire ainsi désigné.

Mon message est un peu long, j'espère cependant m'être bien expliquée.
Me suis-je complètement fourvoyée dans mon traitement du problème?

Merci si vous avez une solution
PS : désolée, même dans code je suis obligée de mettre des antislashes à \[i\] si je ne veux pas qu'ils soient pris pour des attributs de mise en forme.
Modifié par pacafou (24 Nov 2005 - 19:19)

A mon avis tu devrais aussi jeter un coup d'oeil aux règles de posts. A savoir comment on présente son code sur le forum pour qu'il soit lisible de tous

Sinon, la bienvenue.

Merci,
mais où se trouvent les règles de post?

pacafou a écrit :
Merci,
mais où se trouvent les règles de post?

Salut, en haut du forum, tu as le lien "Aide/Règles"
Pour l'instant sur as indique que tes codes sont des... citations
Modifié par Raphael (23 Nov 2005 - 23:17)

Voilà, j'ai essayé de réécrire tout ça plus clairement.

J'espère que cette fois ce sera plus compréhensible.
Merci...

Rebonjour,
Voilà,

j'ai peut être une autre manière de m'en sortir, mettre mon commentaire dans <span class=invisible> soit à l'intérieur de la balise <a> soit après.

Le problème, c'est que lorsque je mets mon commentaire dans une balise, il n'est plus considéré comme firstChild cela empèche qu'il puisse être récupéré de cette manière:

label_photo.firstChild.nodeValue = this.firstChild.nodeValue;

Puisque dans ce cas, je suis dans un noeud enfant: childNodes. Mais comment récupérer la valeur d'un noeud enfant? j'ai essayé childNodes.nodeValue.. ça ne va pas.
Sinon, si je mets ma balise span à l'extérieur de <a>, je suis dans un noeud suivant que je peux récupérer avec nextNode. Même question comment récupérer sa valeur?

Je suis obligée de mettre mon texte dans une balise, car sinon, comment éviter qu'il apparaisse?

Aidez-moi, s'il vous plait!
Merci

Bon pour ceux que ça intéresse, j'ai trouvé:
je mets une balise <span class=invisible> après le lien <a>, mais dans la balise <li>
dans ce cas, le noeud n'est pas nextNode, mais nextSibling, on a donc:

label_photo.firstChild.nodeValue = this.nextSibling.firstChild.nodeValue;

Et là, miracle, ça marche!
allez, bon courage...
Modifié par pacafou (24 Nov 2005 - 19:18)