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.

Workflow Git

Avant de commencer cet exercice :

1
2
3
4
5
git checkout main
git pull origin main
git checkout -b exercice-5
mkdir -p exercice-5/images
cd 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
1
2
3
4
5
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 origin exercice-5

Création de la Pull Request

  1. Allez sur GitHub dans votre dépôt
  2. Cliquez sur "Compare & pull request"
  3. Titre de la PR : feat(exercice-5): galerie d'images interactive

  4. Remplissez la description de la PR :

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

![Galerie complète](URL_de_votre_capture)

#### Effet hover sur une image

![Effet hover](URL_de_votre_capture)

#### Modal ouverte avec image agrandie

![Modal image](URL_de_votre_capture)

#### Vue responsive sur mobile/tablette

![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

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

  6. Cliquez sur "Create pull request"
  7. 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