
Ce premier tutoriel se base sur la librairie Javascript : jQuery. Nous allons apprendre à créer une galerie d'images en utilisant cette librairie ainsi que Flip, un plugin jQuery qui ajoute un effet de rotation afin d'afficher du nouveau contenu.
J'ai utilisé dans cette galerie les photos HDR de cette actu.
La galerie a été testée sur : Firefox, Safari, IE 6/7/8 & Chrome.
Il faut tout d'abord constituer notre galerie au niveau HTML et CSS, viendra par la suite l'animation avec le jQuery.
Il est nécéssaire d'avoir deux versions de chaque image, une miniature (ici 100*67px) et la taille originale.
On a donc une <div class="grande_image"> qui contient l'image en taille réelle avec par défaut la première image à afficher, et une <div class="miniatures"> avec toutes les miniatures.
Voilà le style appliqué aux éléments HTML. Il n'y a rien de particulier dans ce code, pour ceux qui souhaitent obtenir plus de renseignement sur le css, je vous laisse jeter une oeil dans la rubrique HTML/CSS de l'encyclopédie snoupix.
On arrive à la partie qui permet d'animer notre galerie afin de la rendre beaucoup plus agréable à regarder.
Comme on peut le voir dans notre page, il est nécéssaire d'importer ces fichiers javascript :
Voici à quoi ressemble notre code jQuery :
Une fois que la page est bien chargée : $(document).ready, on commence par créer une fonction qui est éxécutée lorsque l'on va cliquer sur une des miniatures.
Le <span> qui contient la description de notre image est vidé grâce à la propriété empty(), ce qui permet d'afficher par la suite les descriptions des miniatures cliquées.
Ensuite on déclare deux variables: chemin et description.
Chaque miniature possède dans son alt le chemin vers l'image en taille réelle. On récupère la description qui elle est présente dans le title de la balise <a>.
C'est à cet endroit que l'on utilise le plugin Flip. On éxécute ce code en poitant vers la <div> possèdant l'id FlipBox.
Ensuite, on renseigne 4 propriétés :
Je sélectionne ensuite le <span> servant à la description, l'attribut html permet de modifier le contenu d'un élément html. Dans mon cas, je souhaite intégrér la description de l'image que je souhaite afficher.
On termine par ajouter un effet d'opacité lors du hover :
La fonction animate() permet de modifier l'opacité. On l'applique d'abord par défaut à toutes les miniatures. Et avec l'évènement .hover, on éxécute en premier la fonction lors du passage de la souris sur l'élément, ici une opacité de 1. Et après la deuxième fonction lorsque la souris n'est plus sur l'élément, on remet l'opacité à 0.5.
Voilà, c'est terminé, vous pouvez voir une démonstration ici et télécharger les fichiers sources.
Dans un prochain tuto, on verra comment gérer cette galerie d'images dynamiquement à l'aide du PHP.