Comment créer une galerie d’images simple à l’aide de HTML, CSS et JavaScript
La création d’une galerie d’images simple à l’aide de HTML, CSS et JavaScript est un excellent moyen d’apprendre les bases du développement Web. Dans la galerie d’images, vous pourrez parcourir les images en sélectionnant des vignettes pour agrandir l’image sur la page Web.
Pour créer la galerie, vous pouvez utiliser HTML pour ajouter le contenu de la page Web et CSS pour ajouter le style. Vous pouvez utiliser JavaScript pour rendre la galerie interactive lorsque l’utilisateur clique sur l’une des vignettes.
Comment créer l’interface utilisateur pour la galerie d’images
Ajoutez l’interface utilisateur pour la galerie d’images en utilisant HTML et CSS. Cela inclut l’ajout d’une grande image au centre de la page Web, qui changera en fonction de la vignette sélectionnée. Vous pouvez également afficher l’exemple de code source complet sur GitHub.
- Créez un nouveau fichier appelé « index.html ».
- Dans ce fichier, ajoutez la structure de code HTML de base :
<!doctype html>
<html lang="en-US">
<head>
<title>Image Gallery</title>
</head>
<body>
<div class="intro">
<h2>Image Gallery</h2>
<p>Select a thumbnail below to view the image</p>
</div>
</body>
</html> - Créez un sous-dossier appelé « images ». Remplissez-le avec plusieurs images et nommez-les de « image1.jpg » à « image10.jpg ».
- Dans votre fichier HTML, ajoutez un div pour la galerie d’images :
<div id="image-gallery">
</div> - À l’intérieur de la div de la galerie d’images, ajoutez une balise d’image pour afficher l’image sélectionnée agrandie. Par défaut, affichez la première image à l’intérieur du dossier « images » :
<img id="current-image" src="images/image1.jpg" alt="Image 1"> - Dans le même dossier que votre fichier HTML, ajoutez un nouveau fichier appelé « styles.css » avec le CSS suivant. N’hésitez pas à modifier le CSS pour ajouter des composants de conception neumorphiques ou à apporter d’autres modifications de conception à l’aide de ces trucs et astuces CSS.
-
.intro {
text-align: center;
font-family: Arial;
}h2 {
font-size: 36px;
}p {
font-size: 14pt;
}#image-gallery {
width: 600px;
margin: 0 auto;
}#current-image {
width: 100%;
} - Ajoutez un lien vers votre fichier CSS dans la balise head de votre fichier HTML :
<link rel="stylesheet" type="text/css" href="styles.css">
Comment ajouter des vignettes pour les autres images de la galerie
Actuellement, la galerie d’images n’affiche que la première image. Sous l’image sélectionnée, ajoutez une liste de vignettes. Ces vignettes afficheront un aperçu de toutes les images à l’intérieur du dossier « images ».
- À l’intérieur de la div de la galerie d’images dans le fichier HTML, ajoutez une autre div pour afficher les vignettes des autres images :
<div id="image-thumbs"></div> - Dans le fichier CSS, ajoutez un style pour la liste des vignettes :
#image-thumbs {
display: flex;
justify-content: center;
margin-top: 20px;
} - Dans le même dossier que vos fichiers HTML et CSS, ajoutez un nouveau fichier appelé « script.js ».
- Ajoutez un lien vers votre fichier JavaScript au bas de la balise HTML body :
<body>
<!-- Your code here -->
<script src="script.js"></script>
</body> - Dans le fichier JavaScript, récupérez l’élément HTML du div qui stockera la liste des vignettes :
var imageThumbs = document.getElementById("image-thumbs"); - Ajoutez une boucle for pour parcourir chacune des 10 images de la galerie :
for (var i = 1; i <= 10; i++) {
} - Dans la boucle, créez un nouvel élément img pour chaque image :
var thumb = document.createElement("img"); - Ajoutez des valeurs pour les attributs « src » et « alt ». Dans ce cas, l’attribut « src » est le chemin d’accès au fichier de l’image au même index dans le dossier « images » :
thumb.src = "images/image" + i + ".jpg";
thumb.alt = "Image " + i; - Dans votre fichier CSS, ajoutez une nouvelle classe pour styliser la vignette de l’image. Vous pouvez également ajouter d’autres styles CSS de survol ou de transition pour les vignettes afin de rendre votre site Web réactif et interactif.
.thumb {
width: 80px;
height: 80px;
object-fit: cover;
margin-right: 10px;
cursor: pointer;
} - Dans le fichier JavaScript, ajoutez la classe ci-dessus à la nouvelle vignette :
thumb.classList.add("thumb"); - Ajoutez la nouvelle vignette à l’élément HTML qui contient la liste des vignettes :
imageThumbs.appendChild(thumb);
Comment changer l’image lorsque l’utilisateur clique sur une vignette
Lorsque l’utilisateur clique sur l’une des vignettes, remplacez l’image agrandie au centre de la page par l’image sélectionnée. Vous pouvez ajouter cette fonctionnalité dans le fichier JavaScript.
- En haut du fichier JavaScript, récupérez l’élément HTML de l’image actuellement sélectionnée :
var currentImage = document.getElementById("current-image"); - Dans la boucle for, ajoutez un gestionnaire d’événements qui se déclenche lorsque l’utilisateur sélectionne l’une des vignettes en bas de la page :
thumb.addEventListener(
"click", function() {
}
); - Dans le gestionnaire d’événements, remplacez l’attribut « src » de l’image actuelle par l’image nouvellement sélectionnée. Vous pouvez également mettre à jour l’attribut « alt » :
currentImage.src = this.src;
currentImage.alt = this.alt; - Cliquez sur le fichier « index.html » pour l’ouvrir dans un navigateur Web.
- Sélectionnez l’une des vignettes pour afficher l’image.
Continuez à développer vos connaissances JavaScript
Quelle que soit votre expérience, il est important de continuer à construire des projets pour élargir vos connaissances. Continuez à explorer d’autres projets tels que la construction d’un jeu d’échecs, d’une calculatrice ou d’une liste de tâches.
Laisser un commentaire