11540 sujets

JavaScript, DOM et API Web HTML5

Ajouter champ pour legende dans une gallerie d'image

Bonjour!!
Voila j'ai une gallerie de photos très simple, avec changement au clic de l'image, comme suit :

<script type="text/javascript">
  function change(elmt, sequence)
  {
    var src = elmt.getAttribute("src"); // On récupére l'url le l'image actuellement affichée
    var last = null;
    
    for(var k in sequence) // On parcours le tableau contenant la séquence des images à afficher
    {
      if( ( last == src ) ) // Si l'image précedente dans la séquence est celle affichée
      {
        elmt.setAttribute('src', sequence[k]); // On affiche l'image actuelle
        return;  // On arréte la fonction
      }
      
      last = sequence[k]; // On mémorise l'url de l'image précédente
    }
    
    elmt.setAttribute('src', sequence[0]); // Par défaut on affiche la première image (si c'est le premier chargement ou si la derniére image est affichée)
  }
</script>


et le body

<body>
		  
		  <img src="photo1.png" id="test" onclick="change(this, ['photo1.png','photo2.png']);"/>
		 
		  </body>



Et je souhaiterai y ajouter, dans une autre div, un champ de description qui change a chaque image, pour y mettre une legende spécifique.

Pensez-vous pouvoir m'aider à le rediger?
je suis encore au stade très débutant ( c'est dur, mais je m'accroche!) et donc incapable encore de rédiger un code entier qui fonctionne!!


Merci merci!! Smiley smile
Modifié par idiotbox (18 Oct 2012 - 20:06)
Salut,

tu peut réaliser celas en modifiant très légèrement le code HTML et le Javascript, après il faudra mettre une petite touche de CSS et le tour est joué.

J'ai complexifié un peu le JavaScript afin de séparer les couches et que ce soit plus propre:


<script type="text/javascript">
  function change(elmt, sequence)
  {
    var src = elmt.getAttribute("src"); // On récupère l'url le l'image actuellement affichée
    var last = null;
    var compteur = elmt.parentNode.children[1]; // On défini que le compteur sera le 2eme élément enfant de l'élément parent de notre image
    
    for(var k in sequence) // On parcours le tableau contenant la séquence des images à afficher
    {
      if( ( last == src ) ) // Si l'image précédente dans la séquence est celle affichée
      {
        elmt.setAttribute('src', sequence[k]); // On affiche l'image actuelle
        compteur.innerHTML = ( parseInt(k) + 1 ) + '/' + sequence.length; // On assigne la valeur du compteur
        return;  // On arréte la fonction
      }
      
      last = sequence[k]; // On mémorise l'url de l'image précédente
    }
    
    elmt.setAttribute('src', sequence[0]); // Par défaut on affiche la première image (si c'est le premier chargement ou si la derniére image est affichée)
    compteur.innerHTML = '1/' + sequence.length; // On assigne la valeur du compteur par défaut
  }
  
  var carousel_sequence = ['photo1.png','photo2.png']; // Ici, on déclare notre séquence d'images de manière global pour pouvoir y accéder de partout
  
  window.onload = function() // Cette fonction anonyme sera exécuté une fois le code HTML chanrgé par le navigateur
  {
    // Carousel

    var carousel_elmt = document.getElementById('test'); // On recherche l'image servant de carousel

    change(carousel_elmt, carousel_sequence); // On initialise le carousel

    carousel_elmt.onclick = function() // On assigne dynamiquement l'événement onclick
    {
        change(this, carousel_sequence);
        // Ici tu peut éféctuer d'autres actions lors du clic sur l'image
    }
    
    // Ici tu peut effectuer d'autres actions au chargement de la page
  }
</script>


Ce qui nous donne un code HTML allégé:


<body>
  <div>
    <img src="" id="test"/>
    <span></span>
  </div>
</body>


J'ai pas vérifié si ça fonctionné mais ça ne devrai pas poser de problème.

Tu peut encore améliorer grandement ce code, là il est minimal, juste de quoi comprendre le fonctionnement.
Merci beaucoup JJK801! ça a l'air de bien marcher, et j'apprends en même temps !
Désolé pour le retard, Ta réponse ne m'avait pas été transmis par mail!
Sujet clos
Aller à