pixel facebook
 

Javascript | Galerie Photos

Ce que vous allez Apprendre

Création d'une galerie photos

Dans ce nouvel exercice d'application de nos connaissances Javascript, nous réutilisons tous les chapitres vus précédemment.

Le but étant de créer un diaporama fluide et infini.

En fin de ce tutoriel vidéo, je vous montre comment écouter les touches du clavier de l'utilisateur s’il souhaite naviguer avec les flèches du clavier.

Pour cela nous pouvons écouter les événements keydown, keypress ou keyup sur l'objet Window. Puis récupérer l’événement keyboardEvent en paramètre de notre fonction de callback.

window.addEventListener('keydown', function(e) {
  if (e.key == 'ArrowRight') {
    next();
  }
  if (e.key == 'ArrowLeft') {
    prev();
  }
});
Pour Aller Plus Loin
Je suis intéressé(e)
par ce chapitre

Télécharger les fichiers sources

inclus

  • Fichiers non finalisés pour faire en même temps que la vidéo

  • Fichiers complétés avec la galerie fonctionnelle

Prix = 2 €
Hors Taxes


Commentaires 2


Votre adresse mail ne sera en aucun cas divulguée ou utilisée, elle nous permet de garantir la pertinence des commentaires affichés

Jonathan - 18/07/2020 15:46:06
Merci et bravo pour ce site! J'ai enfin trouvé un tutoriel à jour, clair et parfaitement détaillé pour réaliser un carrousel simple et efficace.
En ce qui me concerne, j'ai utilisé la classe "btn" pour les boutons. Et "col" au lieu de "col-1" pour #prev et #next, pour une meilleure adaptation sur les mobiles.

Je souhaite intégrer des miniatures pour chaque photo, qui seraient disposées en colonne sur la gauche, et qui auraient la classe "active" dès que la photo correspondante s'affiche.
Auriez-vous des pistes pour cela svp?

Encore merci pour tous ces contenus extrêmement enrichissants et motivants!
Admin - 19/07/2020 09:43:19
Bonjour et mer ci pour le commentaire. :)

Pour avoir les miniatures sur la gauche. On peut imaginer plusieurs approches :

Exemple 1 : Il faut se dire que la source src des images miniatures et celle du carrousel sera sans doute la même. Il suffit de récupérer la src de l'image affichée en ce moment avec un .getAttribute('src') et de la comparer avec la src de la miniature.

Exemple 2 : On peut mettre les sources des images dans un array JS, se créer une variable 'imageActive' qui n'est qu'un compteur et en fonction du numéro dans imageActive on saura qu'elle image est en ce moment affichée.

;) Bon courage !
Jonathan surle - 22/07/2020 01:05:54
Merci beaucoup pour ces pistes !
Botisses - 01/04/2020 19:20:57
J’apprécie énormément ce système d’apprentissage par la pratique en lieu et place de longs discours.
Soyez-en infiniment remercié. J’ai commencé par apprendre Java après le html et le css et grâce à vous je découvre les subtilités de Javascript. Aussi, restant dans le cadre de cette vidéo, je voudrais vous soumettre un cas pratique et apprendre comment le réaliser en Js.
-Les 10 dernières photos reçues défilent en boucle et lorsqu’on passe la souris sur une d’elles, le défilement s’arrête avec un affichage automatique sur cette image comme « Voir plus » ou « Détails »
-Le clique sur cette indication conduit à la page des détails sur la photo.
Merci et à bientôt !

Admin - 01/04/2020 23:18:47
Bonjour, et merci pour le commentaire.

Pour répondre au cas pratique, je pense que en ayant vu cette vidéo vous pourriez tout a fait vous en sortir. Pour donner des pistes :

- Il existe des événements JS qui s'appel mouseover et mouseout
https://developer.mozilla.org/fr/docs/Web/API/Element/mouseover_event
Qui s'occupera d'arreter ou d'enclencher le défilement

- Le voir plus qui s'affiche au survol peut tout a fait etre un lien qui sera masqué, puis affiché au survol grâce au CSS

Bon courage ;)