Galerie javascript avec bouton Next et Previous

Bonjour,
Je désire réaliser une galerie d'image.
J'ai suivi le tutoriel en javascript :
Galerie photo avec JavaScript
J'aurais cependant souhaiter ajouter 2 boutons Next & Previous permettant de naviguer au sein de cette galerie.
J'ai "presque" réussi...
mais quelque chose ne fonctionne pas.

le next/prev fonctionne tres bien au chargement de la page.
Si on clique sur une vignette, le next ne fonctionne plus. En revanche le prev fonctionne, et permet au next de fonctionner à nouveau...

Je crains que mon javascript ne soit plus que barbare et n'insulte les connaisseurs...
Si quelqu'un peut m'aider. Merci d'avance.

ma galerie

mon code html :

<div id="galerie">
  <ul id="galerie_mini">
    <li><a href="images/photo1.png" title="Titre de la photo 1" id="0"><img src="images/m_photo1.png" alt="Le titre de la photo 1" /></a>    </li>
    <li><a href="images/photo2.png" title="Titre de la photo 2" id="1"><img src="images/m_photo2.png" alt="Le titre de la photo 2" /></a>    </li>
    <li><a href="images/photo3.png" title="Titre de la photo 3" id="2"><img src="images/m_photo3.png" alt="Le titre de la photo 3" /></a>    </li>
    <li><a href="images/photo4.png" title="Titre de la photo 4" id="3"><img src="images/m_photo4.png" alt="Le titre de la photo 4" /></a>    </li>
    <li><a href="images/photo5.png" title="Titre de la photo 5" id="4"><img src="images/m_photo5.png" alt="Le titre de la photo 5" /></a>    </li>
    <li><a href="images/photo6.png" title="Titre de la photo 6" id="5"><img src="images/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.png" alt="Photo 1 en taille normale" /</dd>
</dl>
  
<ul id="nav">
    <li><a id="prevButton" ><img src="images/prev.gif" /></a></li>
    <li><a id="nextButton" ><img src="images/next.gif"/></a></li>
</ul>

</div>

mon code css :

div#galerie {
  width: 410px ;
  background: #eed ;
  border: 1px solid #dcb ;
  padding: 15px ;
  margin: 15px 30px ;
  text-align: center ;
  font: 0.9em Georgia, serif ;}

ul#galerie_mini {
  margin: 0 ;
  padding: 0 ;
  list-style-type: none ;}

ul#galerie_mini li {
  float: left ; }

ul#galerie_mini li a img {
  margin: 2px 1px ;
  border: 1px solid #dcb ; }

ul#nav {
  margin: 0 ;
  padding: 0 ;
  list-style-type: none ;}

ul#nav li {
  float: left ; }

dl#photo {
  clear: both ;
  margin: 0 auto ; }

dl#photo dt {
	font: italic 2.5em/1.5em Georgia, serif ;
 	color: #dcb ;}

dl#photo dd {
  margin: 0 ; }

dl#photo img{
  border: 1px solid #dcb ; }

mon code Javascript :

function displayPics()
{
  var photos = document.getElementById('galerie_mini') ;
  // On récupère l'élément ayant pour id galerie_mini
  var liens = photos.getElementsByTagName('a') ;
  // On récupère dans une variable tous les liens contenu dans galerie_mini
  var big_photo = document.getElementById('big_pict') ;
  // Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale

  var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
  // Et enfin le titre de la photo de taille normale
  
  var posPhoto=0;
  
  var next = document.getElementById('nextButton');
  var prev = document.getElementById('prevButton');

  // Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
  for (var i = 0 ; i < liens.length ; i++) {
	  // Au clique sur le bouton next
    next.onclick = function() {
      big_photo.src = liens[posPhoto+1].href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
      big_photo.alt = liens[posPhoto+1].title; // On change son titre
      titre_photo.firstChild.nodeValue = liens[posPhoto+1].title; // On change le texte de titre de la photo
	  posPhoto++;
      };
	  // Au clique sur le bouton previous 
    prev.onclick = function() {
      big_photo.src = liens[posPhoto-1].href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
      big_photo.alt = liens[posPhoto-1].title; // On change son titre
      titre_photo.firstChild.nodeValue = liens[posPhoto-1].title; // On change le texte de titre de la photo
	  posPhoto--;
      };
    // Au clique sur les liens des vignettes
    liens[i].onclick = function() {
      big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
      big_photo.alt = this.title; // On change son titre
      titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
	  posPhoto=this.id;
	  return false; // Et pour finir on inhibe l'action réelle du lien
      };
  } 
}

// Il ne reste plus qu'à appeler notre fonction au chargement de la page
window.onload = displayPics;

[/i]

grâce à des aides extérieurs je crois avoir résolu mon problème.
On me disait que le problème venait du "+1" dans la fonction next.
Je l'ai supprimé en faisant passer l'incrémentation en tete de fonction.

    next.onclick = function() {
      posPhoto++;
      big_photo.src = liens[posPhoto].href; 
      big_photo.alt = liens[posPhoto].title;
      titre_photo.firstChild.nodeValue = lien[posPhoto].title; 
      };

	  // Au clique sur le bouton previous 
    prev.onclick = function() {
      posPhoto--;
      big_photo.src = liens[posPhoto].href;
      big_photo.alt = liens[posPhoto].title;
      titre_photo.firstChild.nodeValue = lien[posPhoto].title; 
      };