Devoir
Galerie d'images
Conditions d'achèvement
Ouvert le : mardi 18 août 2020, 00:00
Consignes
- Le clic sur les boutons prev/next fait défiler les images (dans un sens ou dans l'autre)
- Les touches p/n font défiler les images (dans un sens ou dans l'autre)
- Les touches gauche/droite font défiler les images (dans un sens ou dans l'autre)
- Les images principales sont intégrés via une seule balise img dont on changera la valeur de l'attribut src
- Le clic sur une thumbnail génère l'affichage de l'image principale
- Le clic sur la div "Fermer" provoque la fermeture de l'image
- Appuyer sur la touche "Echap" provoque la fermeture de l'image
Vous trouverez les images déjà taillées en pièce jointe de l'exercice. Je vous laisse faire la partie HTML/CSS vous-même.
Astuce : essayez d'utiliser les attributs data-* dans vos balises img, dans le but de stocker le nom du fichier de l'image originale.
Exemple : <img src="img/thumbnails/1.jpg" class="thumbs" data-filename="1.jpg" />
Astuce #2 : on peut scroller à l'intérieur d'un élément qui est plus petit que son contenu grâce à la propriété CSS overflow:scroll.
Vidéo :
- 18 août 2020, 19:28