Voici le code que j'ai fais, par contre j'ai pas la prétention d'avoir écrit le code parfait ^^'
C'est ouvert à toutes modifications et à tous commentaires
Voici le HTML :
<div class="galerie">
<a href="images/photo1.jpg" title="Titre de la photo 1"><img src="images/minis/m_photo1.jpg" alt="Miniature de la photo 1" /></a>
<a href="images/photo2.jpg" title="Titre de la photo 2"><img src="images/minis/m_photo2.jpg" alt="Miniature de la photo 2" /></a>
<a href="images/photo3.png" title="Titre de la photo 3"><img src="images/minis/m_photo3.png" alt="Miniature de la photo 3" /></a>
<div class="imageContainer">
<img src="images/photo1.jpg" alt="Photo 1 en taille normale" title="Titre de la photo 1" name="IMG" id="IMG" />
</div>
</div>
<div class="galerie">
<a href="images/photo3.png" title="Titre de la photo 3"><img src="images/minis/m_photo3.png" alt="Miniature de la photo 3" /></a>
<a href="images/photo2.jpg" title="Titre de la photo 2"><img src="images/minis/m_photo2.jpg" alt="Miniature de la photo 2" /></a>
<a href="images/photo1.jpg" title="Titre de la photo 1"><img src="images/minis/m_photo1.jpg" alt="Miniature de la photo 1" /></a>
<a href="images/photo3.png" title="Titre de la photo 3"><img src="images/minis/m_photo3.png" alt="Miniature de la photo 3" /></a>
<div class="imageContainer">
<img src="images/photo3.png" alt="Photo 3 en taille normale" title="Titre de la photo 3" name="IMG" id="IMG" />
</div>
</div>
J'ai mis l'image a affiché dans la div "galerie" pour pouvoir la récupérer plus facilement.
et voici le javascript :
function getElementsByClass(node, searchClass, tag) {
var classElements = new Array();
var els = node.getElementsByTagName(tag); // use "*" for all elements
var elsLen = els.length;
var pattern = new RegExp("\\b"+searchClass+"\\b");
for (ii = 0, j = 0; ii < elsLen; ii++) {
if ( pattern.test(els[ii].className) ) {
classElements[j] = els[ii];
j++;
}
}
return classElements;
}
window.onload = function() {
// Recuperation des plusieurs div class='galerie'
var galeries = getElementsByClass(document, 'galerie', 'div');
if (galeries) {
// Pour toutes les galeries
for (var galerieIndex = 0; galerieIndex < galeries.length; galerieIndex++) {
// Recuperation des balises 'a' dans la div 'galerie'
var imageLinkArray = galeries[galerieIndex].getElementsByTagName('a');
for (var linkIndex = 0; linkIndex < imageLinkArray.length; linkIndex++) {
// Pour chaque balises ajouter l'evenement onclick qui executera la fonction displayImage
imageLinkArray[linkIndex].onclick = displayImage;
}
}
}
}
// Fonction pour afficher les images
function displayImage(event) {
// this est notre balise 'a' ou l'on vient de cliquer
var imageHref = this.getAttribute('href'); // Recuperation du href
var imageTitle = this.getAttribute('title'); // Recuperation du title
// Recuperation de l'image container
var imageContainer = getElementsByClass(this.parentNode, 'imageContainer', 'div')[0]; // [0] car il n'y en a qu'un seul...
// Recuperation de la balise 'img' dans l'image container
var image = imageContainer.getElementsByTagName('img')[0]; // [0] car il n'y en a qu'un seul...
image.setAttribute('src', imageHref); // On met la href en source de l'image
image.setAttribute('alt', imageTitle); // On met le title en titre alternatif de l'image
image.setAttribute('title', imageTitle); // On met le title en tooltip de l'image
return false; // Stop l'evenement du clique, permet de ne pas afficher l'image cliqué...
}
Là encore j'ai rien inventé et ça fonctionne, testé sous IE7 et Firefox 3.
