Galerie photo avec JavaScript
Le 08-04-2005 par Collectif Alsacreations dans Tutoriels JavaScript.
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.
Il peut être très avantageux d'utiliser le JavaScript pour certaines choses comme notament 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 galeries en PHP ne permettent pas ce genre de choses et de plus nécessitent l'accès à cette technologie, ce qui n'est pas toujours le cas notament dans le cas de certains hébergeurs gratuits.
Les codes xhtml 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 le 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
};
}
}
window.onload = displayPics;
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
Et voilà votre galerie fin prête à être visitée, vous pouvez voir un exemple de ce que ça donne.
Un problème, une question ?
Vous avez des soucis avec ce tutoriel ? Venez en discuter dans le salon Spécifique aux tutoriels et articles du Forum Alsacréations.
