goit js hw 07

Lisez dans d'autres langues: ukrainien, anglais.

Critères d'acceptation

• Le référentiel goit-js-hw-07 a été créé.
• Les devoirs contient deux liens: sur les fichiers de sortie et une page de travail sur GitHub Pages .
• La console manque d'erreurs et d'avertissements lors de l'ouverture d'une page de vie de la tâche.
• Les noms des variables et des fonctions sont clairs et descriptifs.
• Le code est formulé à l'aide Prettier .

Fichiers de démarrage

• Dans le dossier SRC, vous trouverez des fichiers de démarrage avec le balisage de base et les styles prêts. Copiez-les dans le projet. Pour ce faire, téléchargez ce référentiel comme archive ou utilisez le service DownGit pour télécharger un dossier séparé du référentiel.
• gallery-items.js contient un tableau galleryItems , qui contient des objets avec des informations d'image: Small (aperçu), original (grand) et description. Nous l'avons déjà connecté à chacun des fichiers du projet JS.

Tâche 1 - Galerie d'images

Créez une galerie avec la possibilité d'un clic sur ses éléments et affichez une image de taille complète dans une fenêtre modale. Voir la vidéo de démonstration de la galerie.

galerie-dmo.mp4

Terminez cette tâche dans 01-gallery.html et 01-gallery.js . Cassez-le en quelques sous-appels:

1. La création et le rendu de balisage basé sur galleryItems et l'élément de galerie sont fournis.
2. Mise en œuvre de la délégation sur div.gallery et recevant une grande url d'image.
3. Connexion du script et des styles de la fenêtre modale BasicLightBox. Utilisez le CDN JSDelivr et ajoutez un fichier de bibliothèque ( .min ) au projet.
4. Ouverture d'une fenêtre modale sur un clic sur un élément de galerie. Pour ce faire, vous familiarisez avec la documentation et les exemples.
5. Remplacement de la valeur de l'attribut de l'élément src <img> dans la fenêtre modale avant l'ouverture. Utilisez un marquage de fenêtre modal prêt à prêt avec des exemples de bibliothèque BasicLightBox.

Marquage de l'élément galerie

La référence d'image d'origine doit être stockée dans l'attribut de données source sur l'élément <img> et indiqué dans href . N'ajoutez pas d'autres tags HTML ou des classes CSS sauf celles contenues dans ce modèle.

 < div class =" gallery__item " >
  < a class =" gallery__link " href =" large-image.jpg " >
    < img
      class =" gallery__image "
      src =" small-image.jpg "
      data-source =" large-image.jpg "
      alt =" Image description "
    />
  </ a >
</ div >

Veuillez noter que l'image est enveloppée dans un lien, de sorte que l'utilisateur sera redirigé vers une autre page par défaut. Interdiction de ce comportement par défaut.

Clôture du clavier

️ La fonctionnalité suivante n'est pas requise pour la tâche, mais sera une bonne pratique supplémentaire.

Ajoutez la fermeture de la fenêtre modale après avoir appuyé sur la touche Escape . Faites en sorte que le clavier n'écoute que tant que la fenêtre modale est ouverte. Les bibliothèques Basiclightbox contiennent une méthode de fermeture du logiciel de la fenêtre modale.

Tâche 2 - bibliothèque SimpleLightbox

Faites la même galerie que dans la première tâche, mais en utilisant la bibliothèque Simplelightbox, qui prendra les clics sur les images, découvrira et fermant la fenêtre modale, ainsi que les images en train de secouer avec le clavier.

SimplelightBox- Demo.mp4

Il est nécessaire de modifier légèrement le marquage de la carte de galerie, utilisez ce modèle.

 < a class =" gallery__item " href =" large-image.jpg " >
  < img class =" gallery__image " src =" small-image.jpg " alt =" Image description " />
</ a >

Terminez cette tâche dans 02-lightbox.html et 02-lightbox.js . Cassez-le en quelques sous-appels:

1. La création et le rendu de balisage basé sur galleryItems et l'élément de galerie sont fournis. Utilisez un code prêt prêt à partir de la première tâche.
2. Connexion du script et des styles de bibliothèque à l'aide de CDN CDNJ. Vous devez ajouter des liens à deux fichiers: simple-lightbox.min.js et simple-lightbox.min.css .
3. Initialisation de la bibliothèque après avoir créé et ajouté des éléments de la galerie en div.gallery . Pour ce faire, me familiarisez avec la documentation SimpleLightbox - tout d'abord, les sections d'utilisation et de balisage.
4. Regardez la section de documentation "Options" et ajoutez un affichage de signatures aux images de l'attribut alt . Soit la signature par le bas et apparaissent dans 250 millisecondes après l'ouverture de l'image.