Create a gallery with the ability to click on its elements and view the full-size image in a modal window. Perform this task in files 01-gallery.html and 01-gallery.js. Break it down into several subtasks:
- Create and render markup based on the galleryItems data array and the provided gallery item template.
- Implementation of delegation to ul.gallery and obtaining the url of a large image.
- Connecting the script and styles of the basicLightbox modal window library. Use the jsdelivr CDN service and add a link to the minified (.min) library files to the project.
- Opening a modal window by clicking on a gallery element. To do this, familiarize yourself with the documentation and examples.
- Overriding the value of the src attribute of the
element in the modal window before opening. Use the ready-made markup of the modal window with an image from the examples of the basicLightbox library.
Make the same gallery as in the first task, but using the SimpleLightbox library, which will handle image clicks, opening and closing the modal window, and scrolling images using the keyboard.
Attention! The above-mentioned libraries are connected with the help of a CDN, the connection of which is not used now. Now we use npm or yarn
To use this repository, follow these steps:
- Clone the repository to your local computer;
- Go to the repository directory;
- Run each task following the instructions described in the corresponding task file.
This repository was created and maintained by Oleksii Shevchenko. Questions, suggestions, and feedback can be directed to email or linkedin profile.