Dans le cours : L'essentiel de JavaScript

Utiliser l'évènement CLICK - Tutoriel JavaScript

Dans le cours : L'essentiel de JavaScript

Démarrer mon mois d’essai gratuit Acheter pour mon équipe

Utiliser l'évènement CLICK

“

Notre gestionnaire d’événement étant, maintenant, bien en place, nous pouvons passer à l’affichage de la grande image quand on clique sur l’une des petites images de la galerie. Pour bien comprendre ce que l’on a à faire, retournons sur le fichier singleGallery.html. Et regardez ici, dans le fond de ce fichier, j’ai un élément figure qui a l’identifiant galleryContainer. Et dans cette figure, j’ai une image qui a un attribut source, qui est vide pour le moment. Dans ma feuille de style CSS, regardez, j’ai une série de styles qui régissent l’apparence de ces éléments. Et remarquez pour galleryContainer nous avons, ici, une visibilité hidden et une opacité de zéro. Ça veut dire que cet élément n’est pas visible par défaut. Et puis, nous avons, également, la possibilité de mettre une classe sur cet élément. La classe s’appelle « visible ». Et cette classe change l’opacité et la visibilité de cet élément pour le rendre visible à nouveau. Donc, c’est en mettant ou retirant cette classe visible de l’élément figure qu’on va pouvoir afficher ou masquer cet élément. Sachant tout cela, de retour dans mon JavaScript, je vais créer une nouvelle variable. Je vais l’appeler « imageContainer ». Et ce sera égal à document.getElementById. Et l’identifiant que je vais aller rechercher dans ma page HTML, ce sera, ici, l’identifiant galleryContainer, c'est-à-dire cette figure. Je vais, également, avoir besoin d’une variable supplémentaire. Je vais l’appeler « bigImage ». Et ce sera égal à imageContainer.querySelector. Et je vais aller rechercher l’élément img. Donc, en fait, ici, je vais rechercher l’élément image qui se trouve à l’intérieur de cet élément figure, c'est-à-dire ceci avec l’attribut source qui est vide. Je reviens, maintenant, au niveau de mon JavaScript. Et je vais donner des propriétés à bigImage. Je vais dire que bigImage.src, donc, la source qui est vide pour le moment, c’est égal à image.src. Rappelez-vous qu'image, c’est une variable que je crée ici. Et il s’agit de l’image sur laquelle j’ai cliqué qui a déclenché cet événement. Événement qui a, lui-même, déclenché cette fonction. Donc, je vais donner, ici, la même source à l’image agrandie que la petite image qui est au niveau de la galerie. Maintenant, que c’est fait, je peux rendre ma figure visible. Donc, rappelez-vous que la figure, c’est cet élément-ci qui contient l’image. Cet élément est, pour le moment, masqué par du CSS. Et, donc, cet élément s’appelle, rappelez-vous, « imageContainer ». imageContainer a une propriété qui s’appelle « classList ». Et cette propriété classList a une méthode qui s’appelle « toggle ». To toggle en anglais ça veut dire « allumer », si c’est éteint et éteindre, si c’est allumé. Donc, ici, dans le toggle, je vais mettre le nom de la classe visible. Et l’effet de cette méthode toggle, c’est que si la classe visible est présente sur l’élément, on la retire. Et si la classe visible n’est pas présente sur l’élément, alors, on la met. Dans le code HTML vous voyez que la classe visible n’est pas présente, ici, sur cet élément figure. Donc, nous allons l’ajouter, ici, avec cette méthode toggle. On va voir si ça fonctionne. Je sauvegarde. Je reviens, ici, dans mon navigateur. Je vais cliquer sur l’une des images. Et voilà, la version agrandie de l’image. Pour refermer cette image, eh bien, on aurait tendance à venir cliquer, ici, dans le vide. Mais vous voyez que ça ne marche pas. Effectivement, pour que ça fonctionne, je dois encore mettre un petit peu de JavaScript en plus. Donc, je vais dire, ici, à mon imageContainer qu’il a un EventListener. On va attendre de cliquer sur cet élément. Et quand on clique sur cette figure, on va exécuter une fonction qui s’appellera « closeSinglePict » comme ceci. Le troisième argument dans cette formation, c’est toujours False, rappelez-vous. Bien sûr, pour que ça fonctionne, j’ai besoin d’une fonction supplémentaire qui s’appellera « closeSinglePict ». Et dans cette fonction, je vais aller rechercher de nouveau mon élément figure, c'est-à-dire mon image.Container. Et je vais refaire, ici, un petit toggle, c'est-à-dire cette méthode de cette propriété classList. C'est-à-dire, maintenant, que la classe visible est appliquée à cet élément figure, cette méthode toggle va retirer la classe visible, ce qui rendra cette figure invisible à nouveau. Je sauvegarde. Je reviens dans mon navigateur. Et regardez, je clique sur une image. Et puis, quand je clique, ici, n’importe où sur mon écran, mais cette image disparaît. Je peux, alors, cliquer sur une autre. Cette image redisparaît. Et ainsi de suite. Voilà, ma galerie photo qui est en train de se mettre, bien, en place.

Table des matières