Construire une galerie d'images JavaScript interactive: implémentation de la fonction de commutation d'image dynamique

Ce tutoriel détaille comment créer une galerie d'images interactifs entièrement fonctionnelle à l'aide de HTML, CSS et JavaScript. Nous apprendrons à définir la structure et le style de la galerie et implémenter la fonction de la commutation dynamique de l'image principale lors du clic sur la vignette. L'article couvrira la logique JavaScript de base, la mise en page nécessaire CSS et mettra l'accent sur les considérations clés telles que l'exactitude des chemins d'image pour vous aider à créer une interface d'affichage d'image avec une bonne expérience utilisateur.

La galerie d'images est un composant commun de la conception Web qui peut afficher plusieurs images de manière intuitive. Une galerie interactive permet généralement à l'utilisateur de cliquer sur la vignette pour changer l'image principale affichée. Cet article vous guidera pour construire une telle galerie à partir de zéro et résoudre des problèmes communs tels que "le jeu et non en interaction".

1. Structure HTML: Définition du squelette de la galerie

Tout d'abord, nous devons définir la structure HTML de la galerie. Cela comprend une zone d'affichage d'image principale et un ensemble de miniatures.

 <div class="galerie">
  <div class="Gallery-main">
    
    <img src="https://i.ibb.co/2kfj15z/image-cropped.jpg" alt="image principale" id="main">
  </div>

  <div class="Gallery-P">
    
    <img src="https://i.ibb.co/2kfj15z/image-cropped.jpg" alt="Thumbnail 1" onclick="changeImage (this.src)">
    <img src="https://i.ibb.co/0gwkygj/imagename-2.png" alt="Thumbnail 2" onclick="ChangeImage (this.src)">
    <img src="https://i.ibb.co/2kfj15z/image-cropped.jpg" alt="Thumbnail 3" onclick="changeImage (this.src)">
    <img src="https://i.ibb.co/0gwkygj/imagename-2.png" alt="Thumbnail 4" onclick="ChangeImage (this.src)">
    <img src="https://i.ibb.co/2kfj15z/image-cropped.jpg" alt="Thumbnail 5" onclick="ChalageImage (this.src)">
    <img src="https://i.ibb.co/0gwkygj/imagename-2.png" alt="Thumbnail 6" onclick="changeImage (this.src)">
  </div>
</div>

Description structurelle:

• .Gallery : un conteneur pour toute la galerie pour la mise en page et le centrage global.
• .Gallery-main : un conteneur contenant l'image principale. L'élément d'image principal a un id = "main" unique afin que JavaScript puisse obtenir et modifier avec précision ses attributs SRC.
• .gallery-p : Un conteneur contenant toutes les miniatures. Chaque élément miniature a un gestionnaire d'événements ONClick = "ChangeImage (this.src)" ajouté. Lorsque l'utilisateur clique sur une vignette, la fonction Global ChangeImage sera appelée et la valeur d'attribut SRC de la miniature actuellement cliquée est transmise en tant que paramètre.

2. Style CSS: galerie d'embellissement et de mise en page

CSS est utilisé pour définir l'apparence et la disposition d'une galerie, ce qui la rend réactive et améliore l'effet visuel.

 .gallery {
  Largeur: 90%; / * La largeur représente 90% du conteneur parent * /
  marge: 0 auto; / * Centre horizontal * /
}

.gallery-main {
  Largeur: 45rem; / * Largeur fixe de la zone d'image principale * /
  hauteur: 30rem; / * hauteur fixe de la zone d'image principale * /
  marge: 0 auto; / * La zone d'image principale est centrée horizontalement * /
}

.gallery-main img {
  Largeur: 100%; / * Répéteur de remplissage de largeur d'image * /
  hauteur: 100%; / * Répéteur de remplissage de hauteur d'image * /
  FIT d'objet: couverture; / * Gardez la proportion de l'image et remplissez le conteneur tout en maintenant la taille, recadrer la pièce débordante * /
  Border-Radius: 8px; / * Border arrondi * /
  Box-Shadow: 0 10px 20px RGBA (0, 0, 0, 0,19), 0 6px 6px RGBA (0, 0, 0, 0,23); / * Effet d'ombre * /
}

.gallery-p {
  Affichage: flex; / * Utilisez Flexbox pour disposer des miniatures * /
  Justification-contenu: centre; / * Centre de miniatures horizontalement * /
  wrap flex: enveloppement; / * Les miniatures sont automatiquement emballées pour s'adapter à un petit écran * /
  marge: 2rem; / * Marge supérieure * /
}

.gallery-p img {
  Largeur: 9rem; / * Ligne de vignette Largeur fixe * /
  hauteur: 7rem; / * Hauteur fixe miniature * /
  FIT d'objet: couverture; / * Gardez les proportions d'image et remplissez le conteneur * /
  Border-Radius: 4px; / * Border arrondi * /
  marge: 0,5rem; / * Espacement entre les miniatures * /
  curseur: pointeur; / * Le curseur à main s'affiche lorsque la souris est en plane, et vous pouvez cliquer * /
}

Description du style:

• Conception réactive : Largeur: 90%; et marge: 0 auto; pour adapter et centrer la largeur de la galerie.
• Remplissage et recadrage d'image : Fit d'objet: couverture; Assurez-vous que l'image peut être affichée correctement dans des conteneurs de différentes tailles, évitez la déformation et remplissez toute la zone en même temps.
• Flexbox Disposition : .gallery-p Utiliser l'affichage: flex; En collaboration avec Justify-Content: Center; et wrap flex: enveloppement; Pour atteindre le centrage et l'enveloppe de cycles, ce qui est très important pour adapter différentes tailles d'écran.
• Expérience utilisateur : curseur: pointeur; Améliorez l'expérience utilisateur et indiquez clairement que les miniatures sont des éléments cliquables.

3. Logique interactive JavaScript: implémentation de la fonction de commutation d'image

JavaScript est au cœur de la mise en œuvre de l'interaction de la galerie. Nous définissons une fonction simple pour mettre à jour l'attribut SRC de l'image principale en fonction du chemin d'image entrant.

 // Définissez une fonction pour modifier la source de l'image principale const changeImage = (src) => {
  // Obtenez l'élément d'image principal via id const mainImage = document.getElementyId ("main");
  // Mettez à jour l'attribut SRC de l'image principale au paramètre SRC passé mainimage.src = src;
}

Description du code:

• La fonction ChangeImage (SRC) reçoit un paramètre SRC, qui est la valeur d'attribut SRC de la miniature cliquée.
• Document.GetElementById ("Main") est utilisé pour obtenir l'élément d'image principal dans HTML avec ID "Main".
• mainImage.src = src; Cette ligne est la clé pour implémenter la commutation d'image. Il met à jour la valeur d'attribut SRC de l'élément d'image principal au paramètre SRC reçu par la fonction Modimage, réalisant ainsi la commutation dynamique du contenu d'image principal lors de la cliquetis sur la vignette.

4. Points clés et précautions

Lorsque vous construisez et déboguez une galerie d'images, vous devez accorder une attention particulière aux points suivants, qui sont la clé pour assurer l'interaction normale de la galerie:

• Exactitude des chemins d'image : c'est la raison la plus courante pour laquelle les galeries «n'interagissent pas» ou affichent des images vierges / cassées. Assurez-vous de vous assurer que le chemin d'image indiqué par l'attribut SRC de toutes les balises en HTML est correcte et accessible.

  • Pour les images locales, vérifiez si le chemin relatif est correct (par exemple, images / Dublin Culture1.jpg).
  • Pour les images réseau, assurez-vous que l'URL est terminée et que le serveur d'images permet un accès inter-domaine (si votre page et votre image ne sont pas sous le même domaine). Dans l'exemple, nous avons utilisé l'URL du lit d'image commun pour nous assurer que l'image peut être chargée et démontrée correctement.

• Ordre d'introduction du fichier JavaScript : assurez-vous que votre code JavaScript est exécuté après le chargement de la structure HTML. Habituellement, c'est une bonne habitude de mettre la balise <script> avant le Fermez la balise, ou utilisez l&#39;attribut de repère (<script src = "your_script.js" Defer> ), qui indique au navigateur d&#39;exécuter le script après l&#39;analyse du HTML.</script>

• Méthode de liaison d'événements :

  • Inline OnClick : L'attribut OnClick en ligne est utilisé dans l'exemple. Cette méthode est simple et directe et adaptée aux petits projets.
  • AddeventListener (recommandé) : Dans des applications plus complexes ou de grands projets, il est recommandé d'utiliser la méthode AddeveventListener pour lier les événements. Il sépare la logique JavaScript de la structure HTML, ce qui rend le code plus facile à maintenir, plus flexible et peut lier plusieurs gestionnaires d'événements au même élément.

  Voici un exemple d'utilisation d'AdveventListener au lieu de Inline ONCLICK:

   // lier dynamiquement les événements dans JavaScript pour s'assurer que document.addeventListener ('DomContentOaded', () => {
      const thumbnails = document.QuerySelectorAll ('. Galerie-p img'); // Obtenez tous les éléments miniatures const mainImage = document.getElementById ('main'); // Obtenez l'élément d'image principal // Traversé toutes les miniatures et ajoutez un écouteur d'événements cliquez pour chaque miniature miniature.ForEach (thumb => {
          thumb.addeventListener ('click', () => {
              // Lorsque la vignette est cliquée, définissez l'attribut SRC de l'image principale au SRC de la miniature actuellement cliquée
              mainImage.src = thumb.src;
          });
      });
  });

  À l'aide d'AdveventListener, votre HTML sera plus concis et le code JavaScript peut gérer de manière centralisée la logique des événements.

• Optimisation de l'expérience utilisateur :

  • Ajoutez un style de mise en évidence visuel à la miniature actuellement sélectionnée afin que l'utilisateur puisse clairement savoir quelle image est actuellement affichée. Cela peut être réalisé en ajoutant / supprimant les classes CSS.
  • Envisagez d'ajouter des animations de chargement ou des espaces réservés lorsque l'image se charge pour améliorer l'expérience utilisateur, en particulier lorsque l'image est plus grande ou que le réseau est lent.

Résumer

Grâce à ce didacticiel, nous apprenons en détail comment créer une galerie d'images interactifs de base mais bien fonctionnelle à l'aide de HTML, CSS et JavaScript. Le noyau réside dans la modification dynamique de l'attribut SRC de l'image principale via JavaScript et combinant CSS pour une belle disposition et un traitement réactif. Il est important de se rappeler que le chemin d'image correct est la pierre angulaire du travail normal de la galerie, et la maîtrise des méthodes de gestion des événements JavaScript modernes telles que AddeveventListener rendra votre code plus robuste, flexible et facile à entretenir. Maître ces techniques et vous pourrez ajouter une expérience interactive visuelle plus riche à vos pages Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!