goit-js-hw-08-gallery

Критерії прийому

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

Завдання

Створи галерею з можливістю кліка по її елементах і перегляду повнорозмірного зображення в модальному вікні. Прев'ю результату подивися за посиланням.

Розбий завдання на кілька підзадач:

Створення і рендер розмітки по масиву даних і наданим шаблоном.
Реалізація делегування на галереї ul.js-gallery і отримання url великого зображення.
Відкриття модального вікна при натисканні на елементі галереї.
Підміна значення атрибута src елемента img.lightbox__image.
Закриття модального вікна при натисканні на кнопку button[data-action="close-modal"].
Очищення значення атрибута src елемента img.lightbox__image. Це необхідно для того, щоб при наступному відкритті модального вікна, поки вантажиться зображення, ми не бачили попереднє.

Стартові файли

В папці src ти знайдеш стартові файли проєкту з базовою розміткою і готовими стилями.
В файлі gallery-items.js є масив об'єктів, які містять інформацію про зображеннях: маленьке зображення, оригінальне і опис.

Розмітка елемента галереї

Посилання на оригінальне зображення повинне зберігатися в 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>

Додатково

Наступний функціонал не обов'язковий при здачі завдання, але буде хорошою практикою по роботі з подіями.