Galerie images JavaScript CSS HTML (sans JQuery)

Bonjour,

Après des recherches infructueuses sur Google, je me tourne vers vous pour trouver un exemple de galerie d'images qui fonctionnerait sans la bibliothèque JQuery.

Donc, seulement js, css et html.

Voici un exemple de ce que j'aimerais obtenir:




Listes de mes besoins:
- Vignette courante (sélectionnée) avec un encadré bleu
- Grande image
- Boutons de navigation entre les thumbnails (vignettes)






html

<div id="galerie">
							 <ul id="galerie_mini">
								<li><a href="images/3-contenu/gallerie-images/vignettes/img-vignette1.png" title="Titre de la photo 1" name="petites"><img src="images/3-contenu/gallerie-images/vignettes/img-vignette1.png" alt="Amoya" /></a>    </li>
								<li><a href="images/3-contenu/gallerie-images/vignettes/img-vignette2.png" title="Titre de la photo 2" name="petites"><img src="images/3-contenu/gallerie-images/vignettes/img-vignette2.png" alt="Ubisoft" /></a>    </li>
								<li><a href="images/3-contenu/gallerie-images/vignettes/img-vignette3.png" title="Titre de la photo 3" name="petites"><img src="images/3-contenu/gallerie-images/vignettes/img-vignette3.png" alt="CGI" /></a>    </li>
								<li><a href="images/3-contenu/gallerie-images/vignettes/img-vignette4.png" title="Titre de la photo 4" name="petites"><img src="images/3-contenu/gallerie-images/vignettes/img-vignette4.png" alt="Le titre de la photo 4" /></a>    </li>
								<li><a href="images/3-contenu/gallerie-images/vignettes/img-vignette5.png" title="Titre de la photo 5" name="petites"><img src="images/3-contenu/gallerie-images/vignettes/img-vignette5.png" alt="Le titre de la photo 5" /></a>    </li>
								<li><a href="images/3-contenu/gallerie-images/vignettes/img-vignette6.png" title="Titre de la photo 6" name="petites"><img src="images/3-contenu/gallerie-images/vignettes/img-vignette6.png" alt="Le titre de la photo 6" /></a>    </li>
								<li><a href="images/3-contenu/gallerie-images/vignettes/img-vignette7.png" title="Titre de la photo 7" name="petites"><img src="images/3-contenu/gallerie-images/vignettes/img-vignette7.png" alt="Le titre de la photo 7" /></a>    </li>
								<li><a href="images/3-contenu/gallerie-images/vignettes/img-vignette8.png" title="Titre de la photo 8" name="petites"><img src="images/3-contenu/gallerie-images/vignettes/img-vignette8.png" alt="Le titre de la photo 8" /></a>    </li>
								<li><a href="images/3-contenu/gallerie-images/vignettes/img-vignette9.png" title="Titre de la photo 9" name="petites"><img src="images/3-contenu/gallerie-images/vignettes/img-vignette9.png" alt="Le titre de la photo 9" /></a>  </li>
								<li><a href="images/3-contenu/gallerie-images/vignettes/img-vignette10.png" title="Titre de la photo 10" name="petites"><img src="images/3-contenu/gallerie-images/vignettes/img-vignette10.png" alt="Le titre de la photo 9" /></a>  </li>	
							</ul>
						

						  <div id="photo">
							<p><img id="big_pict" src="images/3-contenu/gallerie-images/img1.png" alt="Photo 1 en taille normale" name="grande"/></p>
						  </div>
						  
						  
						

						<button id="prec">Précédent</button>
						<button id="lect">Lecture</button>
						<button id="suiv">Suivant</button>

css

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

ul#galerie_mini
{
  margin-left: 30px;
  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#galerie_mini li:hover a img
{
  /*le hover ne fonctionne que pour les deux dernières images???*/

  margin: 2px 1px ;
  border: 5px solid #0489B1 ;
}

javascript

window.addEventListener("load",init,false);

// Rappel
// 425px X 300px
// 100px X 70px







// Le numéro de l'image
var noImg = 0;

function init()
{
	
	// Pour les boutons
	document.getElementById("prec").addEventListener("click",reculer,false);
	document.getElementById("suiv").addEventListener("click",avancer,false);
	document.getElementById("lect").addEventListener("click",lecture,false);
	
	// Survol des images
	document.getElementById("petites").addEventListener("mouseover",changerImage,false);
	document.getElementById("petites").addEventListener("mouseout",remettreImage,false);
  
  
  
  
  // http://www.alsacreations.com/tuto/lire/557-galerie-photo-javascript.html
  var photos = document.getElementById('galerie_mini') ;
  
  
  // On récupère l'élément ayant pour id galerie_mini
  var liens = photos.getElementsByTagName('petites') ;
  
  
  // 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('title')[0] ;
  
  
  // Et enfin le titre de la photo de taille normale
  // Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
  for (var i = 0 ; i < liens.length ; ++i) {
    // Au clique sur ces liens 
    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
      return false; // Et pour finir on inhibe l'action réelle du lien
    };
  }
}


function avancer(){
	
	noImg++;
	
	if (noImg == captionText.length){
		noImg = 0;
	}
	
	document.getElementById("galerie_mini").src = "images/3-contenu/gallerie-images/vignettes/img-vignette" + noImg + ".png";
	document.getElementById("big_pict").innerHTML = captionText[noImg];

}




function reculer(){

	noImg--;
	
	if (noImg == -1){
		noImg = captionText.length - 1;
	}
	
	document.getElementById("galerie_mini").src = "images/3-contenu/gallerie-images/vignettes/img-vignette" + noImg + ".png";
	document.getElementById("big_pict").innerHTML = captionText[noImg];
}



// Si la souris est au-dessus de la zone imageDyn, l'image change
function changerImage()
{
	document.getElementById("imageDyn").src='images/terminalAnime.gif';
}

function remettreImage()
{
	document.getElementById("imageDyn").src='images/terminal.gif';
}


function lecture() 
{
    var rotator = document.getElementById('lect'), //get the element
        dir = 'images/3-contenu/gallerie-images/vignettes/',                              //images folder
        delayInSeconds = 1,                           //delay in seconds
        num = 0,                                      //start number
        len = N;                                      //limit
    setInterval(function(){                           //interval changer
        rotator.src = dir + num+'.jpg';               //change picture
        num = (num === len) ? 0 : ++num;              //reset if last image reached
    }, delayInSeconds * 50);
};