Aller au contenu

Exercice 5 : Galerie d'images interactive

Objectif

Créer une galerie d'images interactive et responsive en utilisant HTML, CSS et JavaScript. Cet exercice vous permettra de manipuler le DOM, de gérer les événements utilisateurs, et d'améliorer l'expérience utilisateur avec des interactions visuelles.

Création du dossier de l'exercice

Avant de commencer cet exercice : créer le dossier de l'exercice.

1
2
# sous Git bash
mkdir -p exercice-5

Avec VS Code :

  • Ctrl+Shift+P > Create Folder
  • Ou sélectionnez le dossier parent dans l'explorateur de fichiers puis entrez le nom du nouveau dossier : exercice-5
  • Ou faites un clic droit sur le dossier parent > New Folder > entrez le nom : exercice-5
  • Ou File > New Folder > entrez le nom : exercice-5

1. Créer la structure de la galerie

  • Créez un fichier HTML nommé galerie.html.
  • La galerie doit afficher au moins 8 images de produits ou de paysages.
  • Utilisez des images libres de droits pour éviter les problèmes de copyright.

2. Organiser les images en grille

  • Utilisez des éléments HTML pour créer une grille responsive qui affiche les images en colonnes.
  • Chaque image doit être accompagnée d'un titre descriptif et d'une courte description.

3. Ajouter des styles CSS

  • Créez un fichier CSS nommé galerie-styles.css.

  • Appliquez les styles suivants :

    • Ajoutez une bordure autour de chaque image.
    • Ajoutez un effet de survol (hover) pour agrandir légèrement l'image lorsque la souris passe dessus.
    • Alignez le texte en dessous des images et assurez-vous que le texte est bien lisible.

4. Ajouter une fonctionnalité de modal (optionnelle)

Aide pour la fenêtre modale

Si vous n'avez jamais travaillé avec des modales, voici les concepts de base :

  • Structure HTML : Une modale est une <div> cachée par défaut qui contient :

    • Un fond semi-transparent (overlay)
    • Un conteneur pour le contenu (l'image agrandie)
    • Un bouton de fermeture (X)

  • CSS pour la modale :

    • display: none; par défaut pour cacher la modale
    • position: fixed; pour la positionner au-dessus du contenu
    • Une classe .active ou .show pour l'afficher

  • JavaScript :

    • Écoutez le clic sur chaque image de la galerie
    • Changez le display de la modale à block ou ajoutez la classe .active
    • Récupérez la source (src) de l'image cliquée
    • Affichez cette image dans la modale
    • Écoutez le clic sur le bouton de fermeture pour cacher la modale
    • Bonus : Écoutez la touche Escape pour fermer la modale
  • Lorsqu'un utilisateur clique sur une image, ouvrez une fenêtre modale affichant une version agrandie de l'image, accompagnée d'une description plus détaillée.
  • Utilisez JavaScript pour gérer l'ouverture et la fermeture de la fenêtre modale.

5. Optimisation et accessibilité

  • Assurez-vous que toutes les images contiennent des attributs alt pour l'accessibilité.
  • Vérifiez que la galerie est responsive et s'affiche correctement sur différents appareils (ordinateurs, tablettes, mobiles).

6. Livraison de l'exercice

Checklist avant de soumettre

  • Fichiers : exercice-5/galerie.html, exercice-5/galerie-styles.css, exercice-5/script.js
  • Dossier images avec au moins 8 images : exercice-5/images/
  • Grille responsive créée
  • Effet hover sur les images (zoom)
  • Fenêtre modale fonctionnelle avec JavaScript
  • Tous les attributs alt renseignés
  • Tests responsive effectués

Ouvrez le terminal intégré Ctrl+'

1
2
3
4
5
6
git status
git add .
git commit -m "feat(exercice-5): structure HTML galerie 8 images"
# git commit -m "style(exercice-5): grille CSS responsive et hover"
# git commit -m "feat(exercice-5): modal JavaScript pour agrandissement"
git push

Dans VS Code, utilisez l'interface graphique pour ajouter, committer et pousser vos changements:

  1. Cliquez sur l'icône "Source Control" dans la barre latérale
  2. Ajoutez vos changements en cliquant sur le signe "+"
  3. Commitez vos changements en saisissant un message de commit
  4. Poussez vos changements en cliquant sur l'icône "Push"

Ajout de captures d'écran dans la PR Feedback

  1. Allez sur GitHub dans votre dépôt
  2. Cliquez sur "Pull requests" > Ouvrir une pull request "Feedback"

  3. Ajoutez un commentaire dans la PR avec le texte suivant :

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
    ## Exercice 5 : Galerie d'images interactive

### Ce qui a été réalisé

- [x] Création de `exercice-5/galerie.html`
- [x] Création de `exercice-5/galerie-styles.css`
- [x] Création de `exercice-5/galerie-script.js`
- [x] Dossier `exercice-5/images/` avec 8 images minimum
- [x] Grille responsive pour afficher les images
- [x] Titre et description pour chaque image
- [x] Styles CSS pour la grille et le responsive
- [x] Effet hover sur les images
- [x] JavaScript pour interactions :
- Clic sur image ouvre un modal
- Modal affiche l'image en grand
- Bouton pour fermer le modal
- Navigation clavier (Escape pour fermer)
- [x] Design responsive (mobile, tablette, desktop)

### Captures d'écran

#### Vue d'ensemble de la galerie (grille complète)

<!-- Remplacez `URL_de_votre_capture` par le lien vers votre capture d'écran -->
![Galerie complète](URL_de_votre_capture)

#### Effet hover sur une image

<!-- Remplacez `URL_de_votre_capture` par le lien vers votre capture d'écran -->
![Effet hover](URL_de_votre_capture)

#### Modal ouverte avec image agrandie

<!-- Remplacez `URL_de_votre_capture` par le lien vers votre capture d'écran -->
![Modal image](URL_de_votre_capture)

#### Vue responsive sur mobile/tablette

<!-- Remplacez `URL_de_votre_capture` par le lien vers votre capture d'écran -->
![Version responsive](URL_de_votre_capture)

### Points techniques

- HTML : structure sémantique, attributs data-*
- CSS : Grid ou Flexbox, media queries, transitions, modal styling
- JavaScript : manipulation DOM, événements (click, keydown), gestion du modal
- Responsive : adaptation mobile, tablette, desktop
- UX : transitions fluides, fermeture intuitive du modal

### Questions pour l'enseignant

- (optionnel) Listez vos questions ici

  4. Ajoutez vos captures d'écran en glissant-déposant les images dans le champ de description

  5. Cliquez sur "Create pull request"
  6. N'oubliez pas : Ne cliquez PAS sur "Merge pull request" !

Captures d'écran à inclure dans votre PR

  • Vue d'ensemble de la galerie (grille complète)
  • Effet hover sur une image
  • Modal ouverte avec image agrandie
  • Vue responsive sur mobile/tablette

13. Evaluation

Pour lancer l'évaluation automatique, créez une "tag" sur votre branche main avec le nom exercice5 et poussez-la sur GitHub.

1
git tag exercice5 && git push origin exercice5

Voir Classroom50

Vous trouverez un exemple de commande pour créer la "tag" dans la page du devoir du TP (Assignment) sur Classroom50.

Soumission du compte rendu

N'oubliez pas de soumettre votre compte rendu sur Classroom50 pour que votre travail soit évalué. une fois terminé la correction des exercices (Voir les détails de l'autograder sur Classroom50 puis consulter les résultats "▶ Failure details"), Utilisez la commande de classroom50 pour soumettre votre travail :

1
gh student submit