Comment créer une galerie d’images simple en utilisant HTML, CSS et JavaScript

Créer une galerie d’images simple en utilisant HTML, CSS, ainsi que JavaScript est un moyen formidable de découvrir les éléments essentiels de l’avancement sur Internet. Dans la galerie de photos, vous aurez certainement la possibilité de feuilleter les images en sélectionnant les vignettes pour augmenter la taille de l’image sur la page web.

Pour développer la galerie, vous pouvez utiliser HTML pour inclure le contenu web de la page et CSS pour ajouter le style. Vous pouvez utiliser JavaScript pour rendre la galerie interactive lorsque l’individu clique sur l’une des vignettes.

Comment créer l’interface utilisateur de la galerie d’images ?

Ajoutez l’interface utilisateur pour la galerie de photos en utilisant HTML et CSS. Cela inclut l’ajout d’une immense image dans l’installation de la page Web, qui changera certainement en fonction de la vignette choisie. Vous pouvez également consulter le code complet des ressources de l’exemple sur GitHub.

1. Créez une toute nouvelle donnée appelée « index.html ».
2. À l’intérieur de cette donnée, incluez le cadre de code HTML standard :
3. Créez un sous-dossier appelé « images ». Remplissez-le avec de nombreuses images, et nommez-les de « image1.jpg » à « image10.jpg ».
4. Dans vos documents HTML, ajoutez un div pour la galerie d’images :
5. À l’intérieur du div de la galerie d’images, ajoutez une balise image pour afficher la photo choisie agrandie. Par défaut, présentez la toute première image à l’intérieur du dossier « pictures » :
6. Dans le même dossier que vos documents HTML, ajoutez un nouveau document appelé « styles.css » avec le CSS suivant. N’hésitez pas à modifier le CSS pour ajouter des éléments de conception neumorphiques ou apporter d’autres modifications à la mise en page en utilisant ces idées et aussi ces techniques CSS.
7. Ajoutez un lien web vers votre fichier CSS dans la balise head de vos documents HTML :

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 choisie, ajoutez une liste de vignettes. Ces vignettes présenteront un aperçu de toutes les images à l’intérieur du dossier « pictures ».

1. À l’intérieur de la div de la galerie d’images dans les documents HTML, incluez une autre div pour afficher les vignettes des différentes autres images :
2. À l’intérieur des données CSS, ajoutez un peu de style pour la liste de contrôle des vignettes :
3. Dans le même dossier que vos données HTML et aussi CSS, ajoutez un nouveau fichier appelé « script.js ».
4. Ajoutez un lien vers votre fichier JavaScript au bas de la balise HTML body :
5. À l’intérieur du fichier JavaScript, récupérez l’aspect HTML de la div qui stockera la liste des vignettes :
6. Ajoutez un for-loop pour boucler avec chacune des 10 images de la galerie :
7. A l’intérieur de la boucle, créez un tout nouveau composant img pour chaque image :
8. Ajoutez des valeurs pour les attributs « src » et aussi « alt ». Dans ce cas, l’attribut « src » est le cours des documents vers l’image au même index à l’intérieur du dossier « pictures » :
9. Dans vos documents CSS, ajoutez une toute nouvelle classe pour concevoir la vignette de l’image. Vous pouvez également inclure diverses autres conceptions CSS de survol ou de transition pour les vignettes afin de rendre votre site Web réceptif ainsi qu’interactif.
10. À l’intérieur du fichier JavaScript, ajoutez la classe ci-dessus à la toute nouvelle vignette :
11. Ajoutez la nouvelle vignette à l’élément HTML qui contient la liste des vignettes :

Comment changer l’image lorsque l’utilisateur clique sur une vignette ?

Lorsque l’utilisateur clique sur l’une des vignettes, transformez la plus grande photo au centre de la page en l’image choisie. Vous pouvez inclure cette performance à l’intérieur des documents JavaScript.

1. En haut des documents JavaScript, obtenez l’élément HTML de l’image actuellement sélectionnée :
2. À l’intérieur de la boucle for, incluez un formateur d’occasion qui s’active lorsque l’individu choisit l’une des vignettes à la fin de la page Web :
3. À l’intérieur du formateur d’occasion, transformez l’attribut « src » de l’image existante en la photo nouvellement choisie. Vous pouvez en outre mettre à jour la qualité « alt » :
4. Cliquez sur les données « index.html » pour les ouvrir dans un navigateur internet.
5. Sélectionnez l’une des vignettes pour regarder la photo.

Continuez à développer vos connaissances en JavaScript

Quelle que soit votre expérience, il est important de continuer à structurer des tâches pour élargir votre expertise. Restez pour découvrir d’autres tâches comme la construction d’un jeu vidéo d’échecs, d’une calculatrice ou d’une liste de tâches.

S’abonner à notre newsletter