Javascript | Challenge - Galerie Photos
HTML-код
- Опубликовано: 18 окт 2024
- Accès Site ► weformyou.fr/f...
S'Abonner ► bit.ly/WeFormY...
Nouvel exercice d'application de nos connaissances Javascript, avec cette fois la création d'une galerie photos.
Nous réutilisons tous les chapitres vus précédemment dans cette application.
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.
Suivre WeFormYou sur:
Site Officiel ► weformyou.fr
Twitter ► / weformyou_fr
Page Facebook ► / weformyou.fr
Groupe Facebook ► / weformyou
#weformyou
![GEEK TIMË [OFFICIAL AUDIO]](http://i.ytimg.com/vi/ry-6RvkH880/mqdefault.jpg)
Tout fonctionne parfaitement si on suis correctement le tuto et que l'on fait pas de faute de frappe, simple et efficace, merci beaucoup !
awesome content I loved it
Merci 😀
super cour merci :)
Bonjour,tout d'abord félicitation pour ces vidéos gratuite de qualité qui valent largement des formations payante.
Je ne trouve pas le moyen de vous faire un retour globale de cette formation,difficulté perçue....
Alors ma question pour ce tuto: imaginons que l'on souhaite mettre une class active sur la premiere img et ajouté la class hidden en js.
Pourquoi ce code retourne une erreur?
const images = document.getElementsByTagName('img');
images.classList.add('hidden');
images.classList is undefined...
j'ai essayé aussi images[ ].classList.add('hidden');
Ce qui voudrait dire que soit il faut obligatoirement passé par une boucle ou alors créer une ligne par index souhaité,c'est ça?
Bonjour,
Je n'ai pas besoin de donner la réponse du coup ! 😀 ... On doit obligatoirement passer par une boucle. Car getElementsByTagName('img') récupère toutes les img de la page et nous donne un tableau en retour (Meme si il n'y avait qu'une seule image dans la page).
Il nous faut donc parcourir ce tableau afin d'ajouter la class à chaque élément souhaité.
Salut Gaël
De mon avis c était mieux de debugue à chaque fois que le code ne marche pas juste pour montrer à tes élèves que le débug c'est la vie 😀
Bonjour,je suis bloqué sur un détail en ayant voulu pousser le challenge.
La space bar fera play and pause
count = document.querySelector('.counter'); //div invisible pour stocker une valeur
document.onkeydown = function(e) {
let key = e.keyCode;
//space bar
nbClick = 0;
if (key == 32) {
nbClick++;
function clicked (){
if (nbClick == 1) {
if (count.innerHTML == 1){
clearInterval(interval);
count.innerHTML = 2;
}
else{
setInterval(next,300);
count.innerHTML = 1;
}
}
}
clicked();
}
}
le changement de chiffre s'opere bien mais pas le clearInterval.
Quelqu'un à une solution à proposer?
Bonjour Aurélien
Le setInterval doit etre stocké dans une variable globale pour pouvoir le clear plus tard.
1. Définir la variable globalement : let interval;
2. Stocker l’intervalle dans cette variable : interval = setInterval(next,300);
3. Supprimer l’intervalle pour l’arrêter : clearInterval(interval);
Pour ce qui est du code je vois bien la logique et il doit s'en doute fonctionner mais je le trouve très complexe.
Quelques explications :
- La variable nbClick ne sert pas puisque elle permet de rentrer dans un SI qui sera par définition toujours vrai.
- La fonction clicked devrait être définie au niveau global pour pouvoir s'en resservir quand on clic sur les boutons je suppose ?
- Pour le coté performance on pourrait stocker le fait que la vidéo soit en cour de lecture ou non dans une variable booléenne globale en JS, plutôt que de lui faire écrire et lire un chiffre depuis le HTML (ce qui implique beaucoup d'actions de la part du navigateur).
J’espère être assez explicite 😄 ... C'est super de voir que la formation donne envie d'aller plus loin en tout cas !
@@WeFormYou merci pour le retour maintenant ça fonctionne il me manquait simplement l'etape 2 dans la function.
Je me doute bien qu'il doit y avoir un procédé plus simple mais je n'ai pas trouvé comment vérifier la lecture du diapo,je n'ai trouvé que des choses faites pour la video avec la methode play et pause.
Peut être un futur projet?
Je n'ai pas pensé a me servir de la fonction clicked pour les boutons,je voulais simplement controler le play et pause via la spacebar comme pour les lecteurs video.
C'est pour cela que j'ai mis en place ce scenario me permettant d'avoir une condition fausse.Au départ je voulais récuperer le nombre de fois qu'on appuyait sur la space bar,pas réussi.
@@aurelienamadon7684 tu pourrais utiliser des key press event
la première partie de js ne marche pas:
const images = document.querySelectorAll('#galery img');
for (let i=1 ; i < images.length ; i + =1){
images[i].classList.add('hidden');
}
Mon erreur ?
Thanks
Bonjour,
Le code me parait bon ... Est que l' id="galery" a bien été inscrit dans le HTML et est bien l'élément parent des images ?
Pour apprendre à se debugger, il ne faut pas hésiter à faire 3 tonnes de console.log au départ.
Par exemple, si il n'y a rien dans "images" cela veut dire que l'erreur n'est pas dans la boucle for ... etc ... Et ainsi de suite pour mener l’enquête ;)
Enorme merci.
Mais t'as pas fait le bouton lecture @aléatoire
Salut
pouvez vous me dire où j'ai commis l'erreur dans la partie html
Merci
Register Form
#play, #pause, #next, #prev{
display:inline-block;
color:black;
font-size: 20px;
margin: 10px;
}
#galery img.hidden{
display:none;
}
Galerie
Bonjour et merci de me suivre 😀
Je vois plusieurs petits problèmes :
1. Vous chargez l'ancienne version de Bootstrap ... j'ai pris la version 4 dans la vidéo. Les "col-6" n'existaient pas à l'époque. Repartez toujours du starter template pour créer un fichier HTML, accessible ici pour la version 4 :
getbootstrap.com/docs/4.4/getting-started/introduction/#starter-template
2. Le "container" se ferme trop tôt ... Il doit aussi contenir la 2eme "row" ... il y a un fermant en trop
Pensez à utiliser un formateur de document (prettier par exemple) pour bien voir les imbrications de balises
www.weformyou.fr/formations/visual-studio-code/extensions-utiles
3. il y a un margin dans le css de #prev, #next ... qui ne devrait pas être là. Car vous avez utilisez les 12 colonnes de large et les marges s'additionnent -> il faut préférer des padding dans ce cas.
Bon courage !
😉
@@WeFormYou
Ça marche.
Merci infiniment