goit js hw 07

Читать на других языках: украинский, английский.

Критерии принятия

• Репозиторий goit-js-hw-07 был создан.
• Домашнее задание содержит две ссылки: в выходных файлах и рабочей странице на GitHub Pages .
• Консоли не хватает ошибок и предупреждений при открытии живой страницы задачи.
• Названия переменных и функций ясны и описательны.
• Код сформулирован с использованием Prettier .

Начальные файлы

• В папке SRC вы найдете начальные файлы с базовой разметкой и стилями готовой. Скопировать их в проекте. Для этого загрузите этот репозиторий в качестве архива или используйте службу DownGit для загрузки отдельной папки из репозитория.
• Файл gallery-items.js содержит массив galleryItems , который содержит объекты с информацией о изображении: Small (Preview), Original (большой) и описание. Мы уже подключили его к каждому из файлов проекта JS.

Задача 1 - Галерея изображений

Создайте галерею с возможностью щелчка по его элементам и просмотрите полноразмерное изображение в модальном окне. Смотрите демо -видео галереи.

Галерея-DMO.MP4

Выполните эту задачу в 01-gallery.html и 01-gallery.js . Разбейте его на несколько подзадачи:

1. Создание и рендеринг разметки на основе массива данных galleryItems и элемента галереи предоставляется.
2. Внедрение делегирования на div.gallery и получение большого url изображения.
3. Подключение скрипта и стилей модального окна BasicLoxBox. Используйте JSDELIVR CDN и добавьте файл библиотеки ( .min ) в проект.
4. Открытие модального окна на щелчке на элементе галереи. Для этого познакомьтесь с документацией и примерами.
5. Замена значения атрибута элемента src <img> в модальном окне перед открытием. Используйте готовую модальную маркировку окна с примерами библиотеки BasicLightbox.

Маркировка элемента галереи

Исходная ссылка на изображение должна храниться в атрибуте source данных в элементе <img> и указана в ссылке href . Не добавляйте другие теги HTML или классы CSS, кроме тех, которые содержатся в этом шаблоне.

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

Обратите внимание, что изображение обернуто в ссылку, поэтому пользователь будет перенаправлен на другую страницу по умолчанию. Запрет на это поведение по умолчанию.

Закрытие с клавиатуры

️ Следующая функциональность не требуется для этой задачи, но будет хорошей дополнительной практикой.

Добавьте закрытие модального окна после нажатия клавиши Escape . Сделайте клавиатуру слушать только до тех пор, пока модальное окно открыто. Библиотеки Basiclightbox содержат метод закрытия программного обеспечения модального окна.

Задача 2 - библиотека SimpleLightbox

Сделайте ту же галерею, что и в первой задаче, но используя библиотеку SimpleLightbox, которая будет принимать щелчки на изображениях, обнаруживая и закрывая модальное окно, а также встряхивающие изображения с клавиатурой.

SimpleLightbox- Demo.mp4

Необходимо слегка изменить карту галереи, использовать этот шаблон.

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

Выполните эту задачу в 02-lightbox.html и 02-lightbox.js . Разбейте его на несколько подзадачи:

1. Создание и рендеринг разметки на основе массива данных galleryItems и элемента галереи предоставляется. Используйте готовый код из первой задачи.
2. Соединение стилей сценария и библиотеки с использованием CDN CDNJS. Вам нужно добавить ссылки на два файла: simple-lightbox.min.js и simple-lightbox.min.css .
3. Инициализация библиотеки после создания и добавления элементов галереи в div.gallery . Для этого познакомитесь с документацией SimpleLightbox - прежде всего, разделами использования и разметки.
4. Посмотрите на раздел документации «Параметры» и добавьте отображение подписей на изображения из Attribute alt . Пусть подпись будет снизу и появится через 250 миллисекунд после открытия изображения.