{"id":21279576,"url":"https://github.com/oleksandr-romashko/goit-js-finalproject","last_synced_at":"2026-05-19T11:06:49.583Z","repository":{"id":218989559,"uuid":"747866457","full_name":"oleksandr-romashko/goit-js-finalproject","owner":"oleksandr-romashko","description":"Final JS Fundamentals homework","archived":false,"fork":false,"pushed_at":"2024-01-26T19:32:12.000Z","size":24,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-22T04:08:48.615Z","etag":null,"topics":["cdn","css","html","javascript","simple-lightbox"],"latest_commit_sha":null,"homepage":"https://oleksandr-romashko.github.io/goit-js-finalproject/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oleksandr-romashko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-24T19:48:58.000Z","updated_at":"2024-02-06T13:47:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"7a5889b8-60be-4621-8cb3-823a85dd129b","html_url":"https://github.com/oleksandr-romashko/goit-js-finalproject","commit_stats":null,"previous_names":["oleksandr-romashko/goit-js-finalproject"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oleksandr-romashko%2Fgoit-js-finalproject","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oleksandr-romashko%2Fgoit-js-finalproject/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oleksandr-romashko%2Fgoit-js-finalproject/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oleksandr-romashko%2Fgoit-js-finalproject/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oleksandr-romashko","download_url":"https://codeload.github.com/oleksandr-romashko/goit-js-finalproject/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243738954,"owners_count":20339997,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cdn","css","html","javascript","simple-lightbox"],"created_at":"2024-11-21T10:24:22.641Z","updated_at":"2026-05-19T11:06:44.549Z","avatar_url":"https://github.com/oleksandr-romashko.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# goit-js-finalproject\n\nFinal JS Fundamentals homework\n\n## Стартові файли\n\n[Завантажуй стартові](https://github.com/oleksandr-romashko/goit-js-finalproject/files/14043540/javascript-homework_tree_main_v2_07_src.zip) файли з базовою розміткою, готовими стилями та підключеними файлами скриптів для кожного завдання. Скопіюй їх собі у проект.\n\nФайл `gallery-items.js` містить масив `galleryItems`, який містить об'єкти з інформацією про зображення: маленьке (прев`ю), оригінальне (велике) і опис. Ми вже підключили його до кожного з JS-файлів проекту.\n\n## Завдання 1. Галерея зображень\n\nСтвори галерею з можливістю кліку по її елементах і перегляду повнорозмірного зображення у модальному вікні. Подивися демо відео роботи галереї.\n\n\u003cdetails\u003e\n\n\u003csummary\u003eПриклад виконяння\u003c/summary\u003e\n\n![js-final-project-example-gif-task-1](https://github.com/oleksandr-romashko/goit-js-finalproject/assets/106557671/25687640-912d-4ae9-9c77-d794c321378c)\n\n\u003c/details\u003e\n\nВиконуй це завдання у файлах `01-gallery.html` і `01-gallery.js`. Розбий його на декілька підзавдань:\n\n1. Створення і рендер розмітки на підставі масиву даних `galleryItems` і наданого шаблону елемента галереї.\n1. Реалізація делегування на `ul.gallery` і отримання url великого зображення.\n1. Підключення скрипту і стилів бібліотеки модального вікна [basicLightbox](https://basiclightbox.electerious.com/). Використовуй [CDN сервіс jsdelivr](https://www.jsdelivr.com/package/npm/basiclightbox?path=dist) і додай у проект посилання на мініфіковані (`.min`) файли бібліотеки.\n1. Відкриття модального вікна по кліку на елементі галереї. Для цього ознайомся з [документацією](https://github.com/electerious/basicLightbox#readme) і [прикладами](https://basiclightbox.electerious.com/).\n1. Заміна значення атрибута `src` елемента `\u003cimg\u003e` в модальному вікні перед відкриттям. Використовуй готову розмітку модального вікна із зображенням з прикладів бібліотеки [basicLightbox](https://basiclightbox.electerious.com/).\n\n### Розмітка елемента галереї\n\nПосилання на оригінальне зображення повинно зберігатися в data-атрибуті `source` на елементі `\u003cimg\u003e`, і вказуватися в `href` посилання. Не додавай інші HTML теги або CSS класи, крім тих, що містяться в цьому шаблоні.\n\n```html\n\u003cli class=\"gallery__item\"\u003e\n  \u003ca class=\"gallery__link\" href=\"large-image.jpg\"\u003e\n    \u003cimg\n      class=\"gallery__image\"\n      src=\"small-image.jpg\"\n      data-source=\"large-image.jpg\"\n      alt=\"Image description\"\n    /\u003e\n  \u003c/a\u003e\n\u003c/li\u003e\n```\n\nЗверни увагу на те, що зображення обгорнуте посиланням, отже по кліку за замовчуванням користувач буде перенаправлений на іншу сторінку. Заборони цю поведінку за замовчуванням.\n\n### Закриття з клавіатури\n\n\u003eУВАГА\n\u003e\n\u003eНаступний функціонал не обов'язковий для здавання завдання, але буде хорошою додатковою практикою.\n\nДодай закриття модального вікна після натискання клавіші Escape. Зроби так, щоб прослуховування клавіатури було тільки доти, доки відкрите модальне вікно. Бібліотека [basicLightbox](https://basiclightbox.electerious.com/) містить метод для програмного закриття модального вікна.\n\n## Завдання 2. Бібліотека SimpleLightbox\n\nЗроби таку саму галерею як в першому завданні, але використовуючи бібліотеку [SimpleLightbox](https://simplelightbox.com/), яка візьме на себе обробку кліків по зображеннях, відкриття і закриття модального вікна, а також гортання зображень за допомогою клавіатури.\n\n\u003cdetails\u003e\n  \n\u003csummary\u003eПриклад виконяння\u003c/summary\u003e\n\n![js-final-project-example-gif-task-2](https://github.com/oleksandr-romashko/goit-js-finalproject/assets/106557671/68ee671f-c4ea-454a-9cde-ba95fcf4ba68)\n\n\u003c/details\u003e\n\nНеобхідно трохи змінити розмітку картки галереї, використовуй цей шаблон.\n\n```html\n\u003cli class=\"gallery__item\"\u003e\n   \u003ca class=\"gallery__link\" href=\"large-image.jpg\"\u003e\n      \u003cimg class=\"gallery__image\" src=\"small-image.jpg\" alt=\"Image description\" /\u003e\n   \u003c/a\u003e\n\u003c/li\u003e\n```\n\nВиконуй це завдання у файлах `02-lightbox.html` і `02-lightbox.js`. Розбий його на декілька підзавдань:\n\n1. Створення і рендер розмітки на підставі масиву даних `galleryItems` і наданого шаблону елемента галереї. Використовуй готовий код з першого завдання.\n2. Підключення скрипту і стилів бібліотеки, використовуючи [CDN сервіс cdnjs](https://cdnjs.com/libraries/simplelightbox). Необхідно додати посилання на два файли: `simple-lightbox.min.js` і `simple-lightbox.min.css`.\n3. Ініціалізація бібліотеки після створення і додання елементів галереї у `ul.gallery`. Для цього ознайомся з документацією [SimpleLightbox](https://simplelightbox.com/) - насамперед секції «Usage» і «Markup».\n4. Подивися в документації секцію «Options» і додай відображення підписів до зображень з атрибута `alt`. Нехай підпис буде знизу і з'являється через 250 мілісекунд після відкриття зображення.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foleksandr-romashko%2Fgoit-js-finalproject","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foleksandr-romashko%2Fgoit-js-finalproject","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foleksandr-romashko%2Fgoit-js-finalproject/lists"}