Manipuler le DOM

[Benkusz]

Bonjour,
Je suis à la recherche d'une solution afin d'adapter le code d'une lightbox "FancyZoom".
J'ai besoin de légender sur plusieurs lignes les images ouvertes.
Actuellement la légende est captée par le script dans l'attribut title de chaque vignette. Je peux bien entendu déposer une longue chaine de caractères dans l'attribut, mais je ne suis plus validé par le W3C. À la lecture de cet article sur lamanipulation du DOM, il me semble que ça doit être relativement simple... pour qui sait comment s'y prendre !
Voici un lien vers mon exemple.
Comme je l'écrivais le W3C ne valide pas les retours à la ligne et les espaces forcés dans une balise <a></a>
exemple du code html :

Code: Tout sélectionner

<a class="thumbnail" title="
&nbsp; &nbsp; &nbsp;Titre de l'image<br/>
&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;- Remarque 1<br/>
&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;- Remarque 2<br/>
&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;- Remarque 3<br/>
&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;Conclusion"
href="images/FancyZoom/Neufs/img1.JPG"><img src="images/FancyZoom/Neufs/thumbnail/img1thum.jpg" alt="exemple 1"/></a>

Mon script lightbox (FancyZoom) fait appel à 2 fichiers : FancyZoom.js et FancyZoomHTML.js
Voici le fragment de code de FancyZoom.js (ligne 239)qui fait le lien entre l'attribut title dans le html et son exploitation par FancyZoomHTML.js :

Code: Tout sélectionner

if (includeCaption) {
document.getElementById(zoomCaptionDiv).style.visibility = "hidden";
if (from.getAttribute('title') && includeCaption) {
document.getElementById(zoomCaption).innerHTML = from.getAttribute('title');
} else {
document.getElementById(zoomCaption).innerHTML = "";
}
}

et Voici l'autre fragment de code qui nous intéresse issus de FancyZoomHTML.js à partir de la ligne 297 :

Code: Tout sélectionner

var inCapCol2 = document.createElement("td");
      inCapCol2.setAttribute('background', zoomImagesURI+'zoom-caption-fill.png');
      inCapCol2.setAttribute('id', 'ZoomCaption');
      inCapCol2.setAttribute('valign', 'middle');
      inCapCol2.setAttribute('height', '110'); //BL
      inCapCol2.setAttribute('width', '370'); //BL
      inCapCol2.style.fontSize = '13px';
      inCapCol2.style.fontFamily = 'Helvetica';
      inCapCol2.style.fontWeight = 'bold';
      inCapCol2.style.color = '#ffffff';
      inCapCol2.style.textShadow = '0px 2px 4px #000000';
      inCapCol2.style.whiteSpace = 'nowrap';
      inCapRow1.appendChild(inCapCol2);

Je suppose qu'il doit être possible en ajoutant un identifiant à chaque vignette de compléter l'attribut title=""

Code: Tout sélectionner

// Modification de l'attribut href de notre lien
$('#nomVignette').attr('title', 'la longue légende que je veux faire paraitre tout en restant validé par le W3C');

Est ce que quelqu'un a une solution à me proposer ?
Merci de votre attention !!

[Galdon]

A mon avis, la solution la plus propre et conforme W3C c'est de placer tes labels dans des éléments HTML masqués.

Par exemple, tu te sert de l'attribut title de chaque image pour stocker l'id de l'élément HTML qui contient le label pour cette image, au lieu de stocker directement son contenu :

Code: Tout sélectionner

<div class="thumb">
   <a class="thumbnail" title="label_img_1" href="images/FancyZoom/Neufs/img1.JPG">
      <img src="images/FancyZoom/Neufs/thumbnail/img1thum.jpg" alt="exemple 1"/>
   </a>
   <a class="thumbnail" title="label_img_2" href="images/FancyZoom/Neufs/img11.jpg">
      <img src="images/FancyZoom/Neufs/thumbnail/img11thum.jpg" alt="exemple 2"/>
   </a>
   <a class="thumbnail" title="label_img_3" href="images/FancyZoom/Neufs/img10.JPG">
      <img src="images/FancyZoom/Neufs/thumbnail/img10thum.jpg" alt="exemple 3"/>
   </a>
</div>

<div style="display:none;" id="fancyzoom_descriptions">
   <div id="label_img_1">
   <ul>
      <li>Remarque 1</li>
      <li>Remarque 2</li>
      <li>Remarque 3</li>
   </ul>
   </div>
   <div id="label_img_2">description image 2</div>
   <div id="label_img_3">description image 3</div>
</div>

Après ça implique d'apporter quelques modifications à FancyZoom.

[Benkusz]

Merci de ta réponse !!
As tu un avis sur comment orienter le script vers le labels correspondant ?
C'est à dire lorsque je clique sur mon thumbnail, le script est mis en marche et détecte l'attribut title :

Code: Tout sélectionner

if (from.getAttribute('title') && includeCaption) {
            // Yes, there's a caption, set it up
            document.getElementById(zoomCaption).innerHTML = from.getAttribute('title');

Faut-il modifier la fin de cette dernière ligne de code ? Quelque chose comme :

Code: Tout sélectionner

document.getElementById(zoomCaption).innerHTML = from.getAttribute('title'
-T'as repéré le title, vas cherché dans fancyzoom_descriptions un id identique + colle le ici à la suite-
);

J'aimerai apprendre à faire ça...

[Benkusz]

Il y a ici une personne qui a modifier le code.. C'est compliqué...

[Galdon]

Avec ça ça devrait marcher :

Code: Tout sélectionner

if (from.getAttribute('title') && includeCaption) {
   // On récupère une référence vers l'élément contenant la description de l'image
   var id_element_contenant_description = from.getAttribute('title');
   var element_contenant_description = document.getElementById(id_element_contenant_description);
   
   // On recopie le code HTML de la description du div masqué vers le div zoomCaption
   document.getElementById(zoomCaption).innerHTML = element_contenant_description.innerHTML;
}

[Benkusz]

MERCI !!!!
Ça fonctionne nickel !!
Merci infiniment !
Aussi peux-tu m'expliquer pourquoi id_element_contenant_description est compris par le script ?

[Galdon]

Aussi peux-tu m'expliquer pourquoi id_element_contenant_description est compris par le script ?

Pourquoi il ne le serait pas ?

Le script ne comprend rien du tout, c'est juste que quand tu écris :

Code: Tout sélectionner

var id_element_contenant_description = from.getAttribute('title');

tu déclare une variable qui s'appelle id_element_contenant_description et qui contient en l’occurrence la valeur de l'attribut title d'un lien (<a href=... title=...), "label_img_1" par exemple.

Comme on sait que l'attribut title d'un lien contient l'ID de l'élément qui contient sa description, on a plus qu'à faire :

Code: Tout sélectionner

document.getElementById(id_element_contenant_description).innerHTML

et ça nous retourne le contenu de cet élément, donc la description de notre image.

Après y'a plus qu'à recopier cette description dans l'élément HTML "zoomCaption" :

Code: Tout sélectionner

document.getElementById(zoomCaption).innerHTML = document.getElementById(id_element_contenant_description).innerHTML;

[Benkusz]

Génial ! J'ai compris !!
Merci encore !!!!