bouton next et prevu sur une galerie de photo

bouton next et prevu sur une galerie de photo - Java - Programmation

Marsh Posté le 08-10-2016 à 09:58:33    

Bonjour a tous,
 
j'ai une galerie de photo ( une vingtaine environs), sous forme de miniature et quand je clic dessus il y une grande photo qui apparaît. je reclic et c'est la miniature qui réapparaît.
avec le code javascript cela fonctionne très bien.
j'aimerai pouvoir ajouter des boutons ( prev et next )sur les grandes photos pour ne pas avoir a revenir sur les miniatures pour continuer le diaporama des grande photos..
si quelqu'un a une idée je suis preneur.  
voici le code
 
<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>
 
 

Reply

Marsh Posté le 08-10-2016 à 09:58:33   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed