Bonjour a tous
 
pour mon site j'ai une galerie de  petites vignettes, je clic sur la petites photo et une grande apparaît , je reclic et la petite réapparait.
tous marche trés bien avec le code javascript.
je cherche a ajouté une légende sous la grande photo.
j'ai essayé avec figure et figcaption mais ça n"a pas fonctionner.
si quelqu'un a une solution je suis preneur
merci.
 
<div id="grdgalerie"></div>
<p>
 <a href="photos_galerie_web/grandes_vignettes/escalier-tour.jpg" alt="" Class="gal">
<img src="photos_galerie_web/petites_vignettes/1escalier_tour.jpg" height="167" width="266"  alt="miniature"/></a>
<a href="photos_galerie_web/grandes_vignettes/Cabanne_de_chasseur-2+le.jpg" alt="" Class="gal">
 <img src="photos_galerie_web/petites_vignettes/cabane_de_chasseur-2.jpg" height="167" width="266"  alt="miniature"/></a><span>Cabane de chasseur</span>
</p>
<script>
var links = document.getElementsByClassName('gal'),
          linksLen = links.length;
      for (var i = 0 ; i < linksLen ; i++) {
          links[i].onclick = function() {  
              displayImg(this);  
              return false;  
          };
  }  
 function displayImg(link) {
          var img = new Image(),
           grdgalerie = document.getElementById('grdgalerie');
          img.onload = function() {
            grdgalerie.innerHTML = '';    
             grdgalerie.appendChild(img);      };    
          img.src = link.href;
         grdgalerie.style.display = 'block';
        grdgalerie.innerHTML = '<span>Chargement en cours...</span>';
     }    
 document.getElementById('grdgalerie').onclick = function() {
          this.style.display ='none';
      };
    </script>

Bonjour,  
Il faudrait que stockes la légende dans un data par exemple :
<a href="photos_galerie_web/grandes_vignettes/Cabanne_de_chasseur-2+le.jpg" alt="" Class="gal" data-legende='Cabane de chasseur'>  
et tu la récupères dans displayImg() avec link.dataset.legende puis tu injectes ça dans grdgalerie.innerHTML