bouton next et prevu sur une galerie de photo - Java - Programmation
MarshPosté 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
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>