Bonsoir,
Pour commencer le JavaScript, il n'est pas inutile de commencer à apprendre les bases à l'aide de cours ou livres. Pour ma part je connais uniquement le livre
DOM Scripting de Jeremy Keith (en anglais) et les articles du
Opera Web Standards Curriculum portant sur JavaScript (en anglais aussi). Les deux sont de très bonnes ressources pour débuter. Côté français, je ne sais pas trop s'il y a des ouvrages de référence, mais c'est sans doute le cas.
Tu vas avoir besoin de manipuler le DOM (de préférence de manière plus subtile qu'avec ton innerHtml bien crade
), et d'utiliser quelques éléments de syntaxe JavaScript tels qu'un Array pour stocker des valeurs, par exemple. L'usage de switch ne me semble pas bien intéressant ici. Ton code a aussi pour défaut de répéter plusieurs fois la même chose.
La première chose à faire (en dehors des apprentissages élémentaires), c'est décider comment ça va marcher SANS JavaScript. Tu peux afficher toutes les images dans la page les unes sous les autres, afficher uniquement des vignettes avec un lien pointant vers l'image en grand, voire carrément décider que ça marchera avec JS et puis c'est tout (pas recommandé).
Si tu affiches toutes les images dans la page au départ, avec leur légende, tu dois pouvoir faire un truc sympa.
Une série d'images en HTML (5):
<div id="gallery">
<figure>
<img src="image1.jpg" alt="">
<figcaption>Légende de l'image 1</figcaption>
</figure>
<figure>
<img src="image2.jpg" alt="">
<figcaption>Légende de l'image 2</figcaption>
</figure>
<figure>
<img src="image3.jpg" alt="">
<figcaption>Légende de l'image 3</figcaption>
</figure>
<figure>
<img src="image4.jpg" alt="">
<figcaption>Légende de l'image 4</figcaption>
</figure>
</div><!--#gallery-->
Et le CSS et JavaScript qui va bien (à lire attentivement
), ça pourrait donner ça par exemple:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Galerie simplissime</title>
<style>
body {margin: 0; padding: 20px 50px; font-family: Arial, Helvetica, "Liberation Sans", sans-serif; color: #333; background: #EEE;}
#gallery {width: 660px;}
#gallery figure {display: block; margin: 20px 0; padding: 9px; border: 1px solid #DDD; background: #FFF;}
#gallery figure > img {display:block; margin-bottom: 10px;}
#gallery figure.show {}
#gallery figure.hide {display: none;}
#gallery-nav {overflow: hidden;}
#gallery-nav a {margin: 0 10px; padding: 4px; font-size: .8em; text-decoration: none; background: #555; color: #FFF;}
#gallery-nav .next {float: right;}
</style>
</head>
<body>
<div id="gallery">
<figure>
<img src="http://farm5.static.flickr.com/4100/4752722454_b8627e923b_z.jpg" width="640" height="425" alt="">
<figcaption>Légende de l'image 1</figcaption>
</figure>
<figure>
<img src="http://farm4.static.flickr.com/3397/4629188395_ebe7768d32_z.jpg" width="640" height="425" alt="">
<figcaption>Légende de l'image 2</figcaption>
</figure>
<figure>
<img src="http://farm3.static.flickr.com/2561/4011914093_46f6612107_z.jpg" width="640" height="425" alt="">
<figcaption>Légende de l'image 3</figcaption>
</figure>
<figure>
<img src="http://farm2.static.flickr.com/1317/4552279711_f41e59dde4_z.jpg" width="640" height="425" alt="">
<figcaption>Légende de l'image 4</figcaption>
</figure>
</div><!--#gallery-->
<script>
// On crée des raccourcis vers les représentations dans le DOM
// des éléments qui nous intéressent
var gallery = document.getElementById('gallery'),
galleryPics = gallery.getElementsByTagName('figure'),
galleryTotal = galleryPics.length,
galleryCurrent = 0;
// Fonction utilisée par masquer toutes les images sauf une
function galleryShow(index) {
for (var num=0; num<galleryTotal; num++) {
if (num==index) {
galleryPics[num].className = 'show';
} else {
galleryPics[num].className = 'hide';
}
}
}
// On masque tous les éléments FIGURE sauf un
galleryShow(galleryCurrent);
// On crée un élément A pour la navigation dans la galerie, et on le rajoute
// à la fin de <div id="gallery"></div>
var galleryNav = document.createElement('p'),
galleryNext = document.createElement('a');
galleryNav.setAttribute('id', 'gallery-nav');
galleryNext.className = 'next';
galleryNext.setAttribute('href', '#');
galleryNext.appendChild(document.createTextNode('Image suivante'));
galleryNav.appendChild(galleryNext);
gallery.appendChild(galleryNav);
// Ajout d'un gestionnaire d'évènement pour exécuter une fonction au clic
// sur le lien de navigation.
galleryNext.onclick = function(){
// On masque toutes les images sauf la «suivante»
// (calculée en rajoutant 1 à galleryCurrent, sauf quand on arrive au total!)
galleryShow( (galleryCurrent+1) % galleryTotal );
// Image changée! On incrémente galleryCurrent pour refléter le changement:
galleryCurrent += 1;
return false;
};
</script>
</body>
</html>
C'est relativement simple et ça marche. L'inconvénient de cette galerie-là, c'est que toutes les images seront chargées par le navigateur, y compris celles qui sont masquées. Comme elles sont à priori chargées dans l'ordre, la seule qu'on garde affichée (la première) devrait s'afficher sans retard, mais ça va user de la bande passante. Avantage: les images sont déjà chargées quand on passe à la suivante, donc affichage immédiat. Au final ça devrait être intéressant pour des images pas trop lourdes, et pas trop nombreuses (pas 50 images de 200 ko...).
Le code peut être testé directement en créant un fichier HTML en local et en l'ouvrant dans le navigateur.