/goit-js-hw-08-gallery

Primary LanguageJavaScript

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

Критерии приема

  • Создан репозиторий goit-js-hw-08-gallery.
  • При сдаче домашней работы есть две ссылки: на исходные файлы и рабочую страницу на GitHub pages.
  • При посещении рабочей страницы (GitHub pages) задания, в консоли нету ошибок и предупреждений.
  • Имена переменных и функций понятные, описательные.
  • Код отформатирован с помощью Prettier.

Задание

Создай галерею с возможностью клика по ее элементам и просмотра полноразмерного изображения в модальном окне. Превью результата посмотри по ссылке.

Превью

Разбей задание на несколько подзадач:

  • Создание и рендер разметки по массиву данных galleryItems из app.js и предоставленному шаблону.
  • Реализация делегирования на галерее ul.js-gallery и получение url большого изображения.
  • Открытие модального окна по клику на элементе галереи.
  • Подмена значения атрибута src элемента img.lightbox__image.
  • Закрытие модального окна по клику на кнопку button[data-action="close-lightbox"].
  • Очистка значения атрибута src элемента img.lightbox__image. Это необходимо для того, чтобы при следующем открытии модального окна, пока грузится изображение, мы не видели предыдущее.

Стартовые файлы

  • В папке src ты найдешь стартовые файлы проекта с базовой разметкой и готовыми стилями.
  • В файле app.js есть массив galleryItems, который содержит объекты с информацией о изображениях: маленькое изображение, оригинальное и описание.

Разметка элемента галереи

Ссылка на оригинальное изображение должна храниться в data-атрибуте source на элементе img, и указываться в href ссылки (это необходимо для доступности).

<li class="gallery__item">
  <a
    class="gallery__link"
    href="https://cdn.pixabay.com/photo/2010/12/13/10/13/tulips-2546_1280.jpg"
  >
    <img
      class="gallery__image"
      src="https://cdn.pixabay.com/photo/2010/12/13/10/13/tulips-2546__340.jpg"
      data-source="https://cdn.pixabay.com/photo/2010/12/13/10/13/tulips-2546_1280.jpg"
      alt="Tulips"
    />
  </a>
</li>

Дополнительно

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

  • Закрытие модального окна по клику на div.lightbox__overlay.
  • Закрытие модального окна по нажатию клавиши ESC.
  • Пролистывание изображений галереи в открытом модальном окне клавишами "влево" и "вправо".