Créer une galerie d’images — Javascript & jQuery
Cette semaine, je vous propose de créer votre propre galerie d’images à insérer dans votre site. Il existe de nombreux sites qui proposent des galeries toutes faites, mais le problème c’est que lorsque que vous décidez de modifier un petit peu les paramètres comme le menu ou la manière d’interagir avec les images, cela devient tout de suite compliqué. Là, en développant vous même votre galerie, vous pourrez à votre guise modifier tout ce que vous désirerez dans les moindres détails.
Pour se faire, nous allons dans un premier temps créer une liste en langage html contenant nos images, nous styliserons le tout avec du css puis nous terminerons par du javascript et de la bibliothèque jQuery pour rendre interactive notre galerie.
HTML
Commençons par le début, c’est à dire par créer notre galerie dans un fichier .html par exemple index.html (par défaut). Nous allons avoir besoin de programmer notre galerie avec le langage Javascript et nous utiliserons la bibliothèque jQuery, alors nous allons l’ajouter maintenant dans notre head comme ceci:
Une fois fait, entre les balises <body></body> créer une div appelée galerie dans laquelle vous allez ajouter une liste non ordonnée <ul></ul> appelée galerie-list par exemple, puis le nombre d’images de votre choix, contenues dans des balises <li></li> de cette façon:
À l’intérieur de l’attribut src=“” renseignez la source de votre photo. Prenez l’habitude de bien ajouter l’attribut alt=“” sur toutes vos images. Il sert à apporter une information sur l’image (utile pour les robots de moteur de recherche ou pour un utilisateur de lecteur d’écran…). Remplissez l’attribut avec le nom que vous voulez donner à votre photo. Exemple alt=“Ma première photo”. À cette étape, si vous lancez votre index.html dans le navigateur de votre choix, vous devriez apercevoir toutes vos photos les unes à la suite des autres.
CSS
Attaquons nous à présent au css afin de styliser notre galerie. Ajoutez la balise <style></style>. Commençons par mettre toutes les balise (* {}) sans marge externe et interne, puis choisir une typo (ici la Courier New, en corps 12px). Reprenons le nom de notre galerie, à savoir galerie; je veux qu’elle face une taille de 600px de large et d’une hauteur de 450px, qu’elle soit centrée dans ma page et que sa taille ne dépasse jamais celle de la fenêtre de mon navigateur. J’écris donc ceci:
Je ne vais pas expliquer le css en détail, mais je voudrai un menu pour pouvoir effectuer des actions et contrôler ma galerie (je descend donc ma liste <li>, contenue dans ma galerie de 20px. Je ne veux pas que mes images dépassent de mon conteneur galerie (max-with:100%;…), je veux que mon menu prenne toute la largeur de ma galerie et que sa hauteur soit de 20px (d’où le décalage de 20px fait précédemment). Pour le moment je ne veux afficher aucune de mes photos (galerie-list li: display: none).
JAVASCRIPT
Passons aux choses sérieuses, ajouter votre balise <script></script> dans votre head et ensuite la balise </style>, nous allons écrire à l’intérieur de ces balise afin de programmer les actions de notre galerie. Je commence par ajouter une fonction qui sera automatiquement lue à l’ouverture de mon document (le fichier index.html), et j’ajoute une variable (var) que je nomme select avec pour valeur 1 (pour ma première image) et une variable images qui contient toute ma liste d’images.
Si je regarde mon code html, je vois que nous avons une div appelée galerie-control qui est vide. Cette div va me servir à créer mon menu et mes boutons pour contrôler ma galerie. Dans mon script, juste en dessous de mes deux variables, j’ajoute mon menu à l’aide de l’attribut append(), celui-ci comprendra le nom de mon image (name), un bouton pour afficher l’image suivante (next), un second pour revenir à l’image précédente (prev), et le nombre de photos que contient ma galerie (number).
Ma div number comprendra le numéro de la photo affichée grâce à notre variable select avec le nombre total de photos que contient ma galerie (la longueur de ma variable image (images.length)), séparé par un tiret (de cette façon 1 – 5). Ma galerie affichera (show()) la première photo contenue dans la liste (galerie-list li:nth-child(1)), et ma div name affichera le nom de cette photo en cherchant dans l’attribut alt (si vous avez laissez le camps libre il n’affichera rien).
Revenons à notre css afin de styliser ce que l’on viens d’ajouter à notre div galerie-control. Le nom de ma photo sera centré dans mon menu, son numéro sera calé à droite et mes deux boutons (prev/next) sur la gauche. J’ai fais le choix de mettre des images qui indiquent de revenir ou d’aller à la photo suivante mais vous pouvez mettre ce que vous souhaitez en remplaçant la ligne background-image: url(mon lien); par une couleur (background: #888;) par exemple.
À ce stade vous devriez obtenir ceci (voir image ci-dessous), avec votre première image ainsi que son nom. Aucune action n’est possible, c’est normal nous n’avons encore écrit aucune instruction sur nos boutons.
Bien commençons à programmer notre premier bouton next. Dans un premier temps je crée une fonction view-image qui servira à afficher les éléments suivant ma variable select créee précédemment. Initialement la variable select a comme valeur 1, je peux donc indiquer qu’une image de ma liste sera affichée (show()) en fonction de la valeur de select (ici 1), la première image de ma liste sera donc affichée. Ensuite, je veux forcer le masquage (hide()) de l’image précédente de la liste (si il y en a une) et la suivante, j’ajoute ou je retire donc 1 à select. Pour afficher le nom de mon image, je note tout simplement sa position dans la liste de ma galerie avec select (toujours 1), la fonction text() se charge de remplacer automatiquement le contenu d’un élément. C’est donc exactement ce dont nous avons besoin. La ligne concernant le numéro nous l’avons déjà inscrite plus haut dans notre code, mais je la duplique afin qu’elle se recharge lorsque je ferai appel à la fonction view-image. Voici la syntaxe:
Très bien nous pouvons maintenant écrire notre fonction qui s’effectuera lorsque l’élément next sera cliqué ($(‘.next’).click(function() {}), j’indique d’abord que si la valeur de ma variable select dépasse le nombre total de mes images contenues dans ma galerie la valeur de select sera égale à 0. Lorsque je clique sur mon élément next je veux ajouter 1 à ma valeur select afin de parcourir les images contenues dans ma liste (+=1 est identique à ++) et je veux afficher la bonne image, je vais donc appeler ma fonction view-image créee précédemment. Il ne me reste plus qu’à forcer le masquage de l’avant dernière image de ma liste, étant donné que select vaut 0 lorsque j’ai parcouru toutes mes images .
Voilà, quand je clique sur mon élément next, j’affiche une à une les images de ma galerie, en boucle. Pour le bouton prev la méthode est exactement la même, à l’inverse la valeur select sera ôtée de 1 (select–;), si sa valeur est inférieure ou égale à 0, alors select aura pour valeur le nombre total de mes images contenues dans ma galerie. Je masque ma première image (:nth-child(1)) si select vaut le nombre total de mes images de ma galerie, alors j’appelle ma fonction view-image afin d’afficher l’image correspondante comme ceci:
Parfait, vous avez une galerie fonctionnelle où vous pouvez parcourir et afficher l’image de votre choix en cliquant sur les éléments next et prev ! Maintenant que vous avez compris le principe vous pouvez modifier à votre guise le style de votre galerie et les actions possibles, vous pouvez retirer la boucle où même parcourir vos images en cliquant directement sur l’image affichée (ajouter galerie-list image après l’élément next) de cette façon:
Vous pouvez retrouver une démonstration en ligne ici gggalerie et tester le résultat. J’ai ajouté une fonction qui permet d’afficher l’image au choix, grâce aux flèches directionnelles du clavier, c’est souvent assez pratique :). Bien que ce code soit fonctionnel je suis convaincu qu’il existe une méthode plus pratique et surement plus réduite que ma syntaxe, si vous avez des conseils ou améliorations à apporter à ma proposition, je serai ravi d’en prendre connaissance. Bon code, et à bientôt ;).
Rubrique: Section 17 | 12 Commentaires
Bonjour,
Ca fait des semaines pour pas dire des mois que je cherche ce genre de galerie tout simple comme il me faut !
J’ai bien essayer de suivre votre tutoriel, je suis assez doué pour les Copier/Coller par contre pour ce qui est de la programmation …
si vous avez un peu de temps a me consacrer
Merci
Vidda
Bonjour Vidda,
Oui aucun souci, quel passage de la programmation vous pose problème ?
Hi,
C’est surtout du coté du JavaScript
J’ai fais un fichier script.js et coller le tout dedans…
Si vous avez créé un fichier script.js, il faut renseigner ce fichier dans le
head
juste après la ligne<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
. Pour renseignez son chemin, par exemple<script type="text/javascript" src="script.js"></script>
(si votre script.js se trouve dans le même dossier que votre index.html).Oui oui j’ai fait comme ca
Dans ce cas, voici le lien de la version zippé de la galerie : gggallery-1.0.zip.
Vous pourrez comparer avec la votre et voir se qui pose problème.
Terrible, merci beaucoup
Mon problème viens pas du fait que mes Photo soit en .JPG ?
C’est bon ca marche !
Je sais pas pourquoi mais ca marche
Merci beaucoup !!! Vraiment !!!
Parfait 😉
Pour information vous pouvez mettre les images que vous souhaitez (.jpg, .png, .gif, …), tant que vous inscrivez le bon nom de l’image suivi de son format dans le code html (en respectant bien les majuscules, les espaces ou autres, contenu dans le nom de l’image si il y en a).
merci infiniment pour ce tuto une très bonne astuces. Merci pour votre temps
Bonjour,
Tout d’abord merci pour le code et son explication, étant programmeur débutant cela m’a bien guidé.
Mais si on copie le code tel quel, il ne fonctionnera pas pour la simple raison suivante :
#galerie ul { list-style-type: none; }
#galerie li { margin-top: 20px; }
Vous faites appel à un ID de galerie dans votre code CSS (avec #) alors que c’est une classe dans votre code HTML. Il faut donc changer « # » par « . ».
Sur ce bonne journée et merci encore !
Bonjour,
Oh, effectivement ! Voici peut-être le problème de @Vidda (en commentaire ci-dessus) trouvé après quelques années ;). Bien vu, je corrige l’erreur !
Il faut donc changer le « # » par « . » oui. Pour la correction, je vais plutôt mettre
id
à la place declass
sur l’élémentgalerie
dans le HTML (moins de lignes à modifier).Merci à vous !