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 1


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

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 ;)