ivanruskevych / goit-js-hw-07

goit-js-hw-07

ЗАВДАННЯ # 01 // Виконуй це завдання у файлах 01-gallery.html і 01-gallery.js. // Розбий його на декілька підзавдань:

1. Створення і рендер розмітки на підставі масиву даних galleryItems і наданого шаблону елемента галереї.
2. Реалізація делегування на div.gallery і отримання url великого зображення.
3. Підключення скрипту і стилів бібліотеки модального вікна basicLightbox. Використовуй CDN сервіс jsdelivr і додай у проект посилання на мініфіковані(.min) файли бібліотеки.
4. Відкриття модального вікна по кліку на елементі галереї. Для цього ознайомся з документацією і прикладами.
5. Заміна значення атрибута src елемента в модальному вікні перед відкриттям. Використовуй готову розмітку модального вікна із зображенням з прикладів бібліотеки basicLightbox.
6. Розмітка елемента галереї:
   • Посилання на оригінальне зображення повинно зберігатися в data-атрибуті source на елементі , і вказуватися в 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>

ЗАВДАННЯ # 02

1. Зроби таку саму галерею як в першому завданні, але використовуючи бібліотеку SimpleLightbox (https://simplelightbox.com/), яка візьме на себе обробку кліків по зображеннях, відкриття і закриття модального вікна, а також гортання зображень за допомогою клавіатури.
2. Необхідно трохи змінити розмітку картки галереї, використовуй цей шаблон.

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

3. Виконуй це завдання у файлах 02-lightbox.html і 02-lightbox.js.
4. Розбий його на декілька підзавдань:
   • Створення і рендер розмітки на підставі масиву даних galleryItems і наданого шаблону елемента галереї. Використовуй готовий код з першого завдання.
   • Підключення скрипту і стилів бібліотеки, використовуючи CDN сервіс cdnjs (https://cdnjs.com/libraries/simplelightbox).
   • Необхідно додати посилання на два файли: simple - lightbox.min.js і simple - lightbox.min.css.
   • Ініціалізація бібліотеки після створення і додання елементів галереї у div.gallery. Для цього ознайомся з документацією SimpleLightbox - насамперед секції «Usage» і «Markup».
   • Подивися в документації секцію «Options» і додай відображення підписів до зображень з атрибута alt. Нехай підпис буде знизу і з'являється через 250 мілісекунд після відкриття зображення.