Aller au contenu

Galerie de réalisations avec visionneuse

Le portfolio d'un artisan : une grille de chantiers filtrée par type de travaux, avec lieu, année et durée, et une visionneuse plein écran avec légendes et navigation au clavier.

  • Tailwind
  • React
  • CSS
  • WordPress
Ouvrir dans un nouvel onglet

Description

Chaque chantier est présenté avec son type, sa commune, son année, sa durée et une courte description. Les filtres (salle de bain, cuisine, extérieur) réduisent la grille et la visionneuse ne parcourt que les réalisations affichées. La visionneuse s'appuie sur l'élément dialog natif : photo en grand, compteur, légende complète, boutons précédent et suivant, glissement du doigt sur mobile et clic sur le fond pour fermer. Accessibilité : filtres en boutons à état (aria-pressed) avec annonce du nombre de résultats ; visionneuse modale qui garde le focus, se ferme avec Échap et rend le focus à la vignette d'origine ; flèches gauche et droite, Début et Fin pour naviguer ; compteur annoncé (aria-live) ; boutons de 44 px avec focus visible ; textes au contraste AA en clair comme en sombre ; zoom au survol et animation d'ouverture désactivés avec prefers-reduced-motion. Sans JavaScript, la grille reste une liste de photos légendées, sans bouton inactif. Les dégradés se remplacent par vos photos en gardant le texte alternatif.

Code

Chargement du code…

Contenu de l'archive

galerie-realisations-grille-html-tailwind.zip3 fichiers · 8 Ko

  • index.html27 Ko
  • README.md4 Ko
  • LICENSE.md1 Ko

Mots-clés

Mis à jour le 16 octobre 2026.

Dans le même esprit

  • Deux photos superposées et une poignée à faire glisser pour montrer vos chantiers, coupes ou jardins avant et après.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Une grille de photos filtrée par thème, avec des boutons à bascule et l'annonce du nombre de photos affichées.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Un carrousel de photos avec précédent, suivant, puces et bouton pause, qui ne défile jamais tout seul si l'utilisateur limite les animations.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • La page qui suit un devis ou un message de contact : confirmation claire, délai de réponse annoncé, récapitulatif imprimable, prochaines étapes et liens utiles.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant