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 voir l'exemple complet

1. Créez un nouveau fichier appelé "index.html".
2. Dans ce fichier, ajoutez la structure de code HTML de base:

   html>
   <htmllangue="en-US">
   <diriger>
   <titre>Galerie d'imagestitre>
   diriger>
   <corps>
   <divclasse="introduction">
   <h2>Galerie d'imagesh2>
   <p>Sélectionnez une vignette ci-dessous pour afficher l'imagep>
   div>
   corps>
   html>

3. Créez un sous-dossier appelé "images". Remplissez-le avec plusieurs images et nommez-les de "image1.jpg" à "image10.jpg".
4. Dans votre fichier HTML, ajoutez un div pour la galerie d'images:

   <dividentifiant="Galerie d'images">
   div>

5. À 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":

   <imageidentifiant="Image actuelle"src="images/image1.jpg"autre="Image 1">

6. 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 composants de conception neumorphiques ou faire d'autres ajustements de conception en utilisant ces trucs et astuces CSS.

7. .intro { 
   aligner le texte: centre; 
   famille de polices: Arial;
   }
   h2 { 
   taille de police: 36pixels;
   }
   p { 
   taille de police: 14pt;
   }
   #Galerie d'images { 
   largeur: 600pixels; 
   marge: 0 auto;
   }
   #Image actuelle { 
   largeur: 100%;
   } 

8. Ajoutez un lien vers votre fichier CSS dans la balise head de votre fichier HTML:

   <lienrel="feuille de style"taper="texte/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".

1. À 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:

   <dividentifiant="image-pouces">div>

2. Dans le fichier CSS, ajoutez un style pour la liste des vignettes:

   #image-thumbs { 
   afficher: fléchir; 
   justifier-contenu: centre; 
   marge supérieure: 20pixels;
   }

3. Dans le même dossier que vos fichiers HTML et CSS, ajoutez un nouveau fichier appelé "script.js".
4. Ajoutez un lien vers votre fichier JavaScript au bas de la balise HTML body:

   <corps>
    Votre code ici 
   <scénariosrc="script.js">scénario>
   corps>

5. Dans le fichier JavaScript, récupérez l'élément HTML du div qui stockera la liste des vignettes:

   var imageThumbs = document.getElementById("image-pouces");

6. Ajoutez une boucle for pour parcourir chacune des 10 images de la galerie:

   pour (var je = 1; je <= 10; je++) {
   }

7. Dans la boucle, créez un nouvel élément img pour chaque image:

   var pouce = document.createElement("img");

8. Ajoutez des valeurs pour les attributs "src" et "alt". Dans ce cas, l'attribut "src" est le chemin du fichier vers l'image au même index dans le dossier "images":

   pouce.src = "image/image" + je + ".jpg";
   pouce.alt = "Image " + je ;

9. 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 à rendre votre site web responsive et interactif.

   .pouce { 
   largeur: 80pixels; 
   hauteur: 80pixels; 
   ajustement à l'objet: couverture; 
   marge droite: 10pixels; 
   le curseur: aiguille;
   }

10. Dans le fichier JavaScript, ajoutez la classe ci-dessus à la nouvelle vignette:

    pouce.classList.add("pouce");

11. Ajoutez la nouvelle vignette à l'élément HTML qui contient la liste des vignettes:

    imageThumbs.appendChild (pouce);

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.

1. En haut du fichier JavaScript, récupérez l'élément HTML de l'image actuellement sélectionnée:

   var ImageCourante = document.getElementById("Image actuelle");

2. À l'intérieur de la boucle for, ajouter un gestionnaire d'événements qui se déclenche lorsque l'utilisateur sélectionne l'une des vignettes en bas de la page:

   pouce.addEventListener(
   "Cliquez sur", fonction() {
    }
   );

3. 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":

   ImageCourante.src = ce.src;
   ImageCourante.alt = ce.alt ;

4. Cliquez sur le fichier "index.html" pour l'ouvrir dans un navigateur Web.
5. 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.