Créer une Galerie d’Images avec HTML, CSS et JavaScript

Introduction

Créer une galerie d’images est une compétence essentielle pour tout développeur front-end. Dans cet article, nous allons explorer comment construire une galerie d’images simple en utilisant HTML, CSS et JavaScript. Que vous soyez un développeur débutant ou intermédiaire, vous trouverez des conseils pratiques et des exemples concrets pour vous aider à réaliser votre projet.

1. Structure HTML de la Galerie

La première étape consiste à créer la structure HTML de votre galerie. Voici un exemple de code :

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

Dans cet exemple, nous avons une <div> qui contient plusieurs images. Assurez-vous d’utiliser des balises <img> avec des attributs src et alt appropriés.

2. Styles CSS pour la Galerie

Ensuite, nous allons styliser notre galerie avec CSS. Voici un exemple de styles :

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.gallery img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 8px;
  transition: transform 0.2s;
}
.gallery img:hover {
  transform: scale(1.05);
}

Ce code CSS utilise Flexbox pour disposer les images et ajoute un effet de zoom au survol. N’hésitez pas à ajuster les styles selon vos préférences.

3. Ajouter de l’Interactivité avec JavaScript

Pour rendre notre galerie plus interactive, nous allons ajouter un peu de JavaScript. Par exemple, nous pouvons créer une fonction qui affiche une image en plein écran lorsqu’elle est cliquée :

const images = document.querySelectorAll('.gallery img');
images.forEach(img => {
  img.addEventListener('click', () => {
    const fullImg = document.createElement('img');
    fullImg.src = img.src;
    fullImg.style.width = '100%';
    fullImg.style.position = 'fixed';
    fullImg.style.top = '0';
    fullImg.style.left = '0';
    fullImg.style.zIndex = '1000';
    document.body.appendChild(fullImg);
    fullImg.addEventListener('click', () => {
      document.body.removeChild(fullImg);
    });
  });
});

Ce code permet d’afficher une image en plein écran lorsque l’utilisateur clique dessus, et de la fermer en cliquant à nouveau.

Conclusion

Créer une galerie d’images avec HTML, CSS et JavaScript est un excellent moyen d’améliorer vos compétences en développement front-end. En suivant les étapes décrites dans cet article, vous pouvez construire une galerie simple mais efficace. N’hésitez pas à expérimenter avec différents styles et fonctionnalités pour personnaliser votre galerie selon vos besoins.