Préambule: en complément ou en remplacement de ce tutoriel créé en 2005, nous vous proposons de consulter un tutoriel plus récent : Une galerie d’images simple avec jQuery. Ce dernier est destiné aux personnes ayant déjà des bases en JavaScript et si possible avec jQuery.
Voici un petit exemple concret d'un cas où JavaScript permet un gain au niveau de la navigation sans entrave à l'accès au contenu au cas où ce dernier soit désactivé. La séparation du contenu et de la partie script permet une facilité de gestion de votre galerie et un allègement du poids des pages, en effet vous n'avez aucun code JavaScript à ajouter dans votre page en elle même, tout est géré par le script et appelé dans la partie <head> de la page.
Voir la démonstration
Il peut être très avantageux d'utiliser le JavaScript pour certaines choses comme notamment des galeries photos (ou autre), en effet vous ne rechargez pas la page au clic sur la miniature, la photo en taille réelle est directement affichée sans recharger quoi que ce soit.
Les codes HTML et CSS
Nous allons commencer par voir comment structurer notre code xhtml afin d'agir dessus, il s'agira de présenter les miniatures sous forme de liste non ordonnée et d'ajouter ensuite une zone pour l'image en taille réelle.
<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>
<li>
<a href="images/photo7.png" title="Titre de la photo 7"><img src="images/minis/m_photo7.png" alt="Le titre de la photo 7" /></a> </li>
<li>
<a href="images/photo8.png" title="Titre de la photo 8"><img src="images/minis/m_photo8.png" alt="Le titre de la photo 8" /></a> </li>
<li>
<a href="images/photo9.png" title="Titre de la photo 9"><img src="images/minis/m_photo9.png" alt="Le titre de la photo 9" /></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>
</div>
Nous allons mettre un peu de style dans tout ça pour rendre le tout plus agréable, voici donc un exemple de code css utilisable, à vous d'adapter à vos besoins.
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 ;
}
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 ;
}
Voilà notre galerie mise en place, à ce stade vous pouvez déjà tester le résultat, vous vous rendez compte que les liens sur les miniatures ouvrent les images en taille réelle dans la fenêtre. C'est le comportement que vous aurez si le JavaScript est desactivé, vous voyez donc que l'accès au contenu n'est pas bloqué dans ce cas, vos photos sont alors disponibles normalement. Il ne nous reste alors qu'à faire le script JavaScript pour rendre ceci un peu plus agréable.
La fonction JavaScript gérant la galerie
Il faut maintenant créer la fonction JavaScript qui gérera notre galerie, commençons par l'appeler dans notre page html en plaçant cette ligne dans la partie <head> :
<script type="text/javascript" src="script.js"></script>
Il faut maintenant créer ce fichier script.js.
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
// 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
};
}
}
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
window.onload = displayPics;
Et voilà votre galerie fin prête à être visitée, vous pouvez constater le résultat.