Bonjour,
J'ai réaliser une galerie photo en javascript à l'aide du tutoriel sur alsacréation.
J'aimerais rajouter des flêches à gauche et à droite pour que les photos miniatures défilent et non qu'elles se mettent en dessous lorsqu'il n'y a plus de place sur la ligne.
J'ai beau chercher sur différents forum mais je n'y arrive pas!
Pouvez-vous m'aider?
Voici mon code:
Code HTML :
<head> : <script type="text/javascript" src="script.js"></script>
<div id="galerie">
<ul id="galerie_mini">
<li><a href="images/photo1.png" title="Titre de la photo 1"><img src="images/minis/m_photo1.png" alt="Le titre de la photo 1" /></a></li>
<li><a href="images/photo2.png" title="Titre de la photo 2"><img src="images/minis/m_photo2.png" alt="Le titre de la photo 2" /></a></li>
<li><a href="images/photo3.png" title="Titre de la photo 3"><img src="images/minis/m_photo3.png" alt="Le titre de la photo 3" /></a></li>
<li><a href="images/photo4.png" title="Titre de la photo 4"><img src="images/minis/m_photo4.png" alt="Le titre de la photo 4" /></a></li>
<li><a href="images/photo5.png" title="Titre de la photo 5"><img src="images/minis/m_photo5.png" alt="Le titre de la photo 5" /></a></li>
<li><a href="images/photo6.png" title="Titre de la photo 6"><img src="images/minis/m_photo6.png" alt="Le titre de la photo 6" /></a></li>
</ul>
<dl id="photo">
<dt>Titre de la photo 1</dt>
<dd><img id="big_pict" src="images/photo1.jpg" alt="Photo 1 en taille normale" /></dd>
</dl>
</div>
Code javascript :
function displayPics()
{
var photos = document.getElementById('galerie_mini') ;
var liens = photos.getElementsByTagName('a') ;
var big_photo = document.getElementById('big_pict') ;
var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
for (var i = 0 ; i < liens.length ; ++i) {
liens[i].onclick = function() {
big_photo.src = this.href;
big_photo.alt = this.title;
titre_photo.firstChild.nodeValue = this.title;
return false;
};
}
}
window.onload = displayPics;
MERCI!