goit js hw 07

Leer en otros idiomas: ucraniano, inglés.

Criterios de aceptación

• Se creó el repositorio goit-js-hw-07 .
• La tarea contiene dos enlaces: en archivos de salida y una página de trabajo en GitHub Pages .
• La consola carece de errores y advertencias al abrir una página de vida de la tarea.
• Los nombres de variables y funciones son claros y descriptivos.
• El código está formulado usando Prettier .

Archivos iniciales

• En la carpeta SRC encontrará archivos de inicio con marcado base y estilos listos. Copiarlos en el proyecto. Para hacer esto, descargue este repositorio como un archivo o use el servicio Downgit para descargar una carpeta separada del repositorio.
• gallery-items.js contiene una matriz galleryItems , que contiene objetos con información de imagen: pequeña (vista previa), original (grande) y descripción. Ya lo hemos conectado a cada uno de los archivos del proyecto JS.

Tarea 1 - Galería de imágenes

Cree una galería con la posibilidad de un clic en sus elementos y vea una imagen de tamaño completo en una ventana modal. Vea el video de demostración de la galería.

galería-dmo.mp4

Complete esta tarea en 01-gallery.html y 01-gallery.js . Romperlo en algunas subcalls:

1. Se proporciona la creación y el marcado basado en galleryItems y el elemento de la galería.
2. Implementación de la delegación en div.gallery y recibir una url de imagen grande.
3. Conectando el script y los estilos de la ventana modal de BasicLightBox. Use el JSDelivr CDN y agregue un archivo de biblioteca ( .min ) al proyecto.
4. Abrir una ventana modal en un clic en un elemento de la galería. Para hacer esto, familiarizarse con la documentación y los ejemplos.
5. Reemplazo del valor del atributo del elemento src <img> en la ventana modal antes de abrir. Use un marcado de ventana modal hecho listo con ejemplos de BasicLightBox Library.

Marcado del elemento de la galería

La referencia de imagen original debe almacenarse en el atributo de datos source en el elemento <img> e indicarse en href . No agregue otras etiquetas HTML o clases CSS, excepto las contenidas en esta plantilla.

 < 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 >

Tenga en cuenta que la imagen está envuelta en un enlace, por lo que el usuario será redirigido a otra página de forma predeterminada. Prohibición de este comportamiento predeterminado.

Cerrar del teclado

️ La siguiente funcionalidad no es necesaria para la tarea, pero será una buena práctica adicional.

Agregue el cierre de la ventana modal después de presionar la tecla Escape . Haga que el teclado escuche solo mientras la ventana modal esté abierta. Las bibliotecas BasicLightBox contienen un método para el cierre de software de la ventana modal.

Tarea 2 - Biblioteca de SimpleLightbox

Haga la misma galería que en la primera tarea, pero utilizando la biblioteca SimpleLightBox, que tomará los clics en las imágenes, descubriendo y cerrando la ventana modal, así como sacudiendo imágenes con el teclado.

SimpleLightbox- demo.mp4

Es necesario cambiar ligeramente la tarjeta de la galería, use esta plantilla.

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

Complete esta tarea en 02-lightbox.html y 02-lightbox.js . Romperlo en algunas subcalls:

1. Se proporciona la creación y el marcado basado en galleryItems y el elemento de la galería. Use un código hecho listo desde la primera tarea.
2. Conectando el script y los estilos de biblioteca con CDN CDNJS. Debe agregar enlaces a dos archivos: simple-lightbox.min.js y simple-lightbox.min.css .
3. Inicialización de la biblioteca después de crear y agregar elementos de la galería en div.gallery . Para hacer esto, familiarizarse con la documentación de SimpleLightBox, en primer lugar, las secciones de uso y marcado.
4. Mire la sección de documentación "Opciones" y agregue una visualización de firmas a las imágenes del Attributo alt . Deje que la firma esté a continuación y aparezca en 250 milisegundos después de que se abra la imagen.