Voir la page de démonstration
Màj: 25 juillet 2010
J’ai codé cette galerie d’images extrêmement simple à titre d’exercice, pour réviser quelques bases de JavaScript et d’utilisation du DOM pour créer des éléments.
Le code de cette galerie n’est pas conçu pour être réutilisé tel quel sur un site web. D’ailleurs, cette galerie ne s’affichera pas correctement sur toutes les versions d’Internet Explorer avant la 9, et n’a pas été testée largement sur les autres navigateurs non plus.
Il s’agit d’un exemple à étudier, à comprendre, et éventuellement à modifier et adapter à vos besoins.
Le script JS est ici, et je vous invite à le lire; quant au code CSS, il pourrait facilement être remplacé par un autre.
La galerie peut être visionnée sans JavaScript. Dans ce cas, toutes les images et leurs légendes sont affichées.
Au chargement de la page, le script JavaScript va masquer toutes les images sauf la première, et rajouter un lien de navigation pour passer à l’image suivante.
L’affichage ou le masquage des images est géré en CSS. En JavaScript,
on se contente de rajouter ou enlever une classe sur l’élément, et les styles
utilisés sont définis dans la feuille de styles. En règle générale, évitez
d’utiliser element.style en JavaScript!
Au clic sur ce lien, on affiche l’image suivante, et quand on arrive en
bout de course on réaffiche la première image. On utilise l’évènement DOM0
element.onclick. On pourra lire
La
gestion des événements en JavaScript.
Mis à part les fonctionnalités inexistantes, qui peuvent bien sûr être développées en plus si on le souhaite (à votre tour de réviser un peu JavaScript!), la principale limite de cette galerie est que toutes les images seront chargées dès le départ par le navigateur.
Cela signifie qu’il n’y aura probablement pas de temps de chargement à chaque changement d’image, mais aussi que ce système de galerie n’est pas adapté à un nombre important d’images (au dessus de 10), à des images très volumineuses, et au chargement sur un périphérique mobile ou autre connexion lente.