goit js hw 07

Read in Other Languages: Ukrainian, English.

Acceptance criteria

• The goit-js-hw-07 repository was created.
• Homework contains two links: on output files and a work page on GitHub Pages .
• The console lacks errors and warnings when opening a living page of the task.
• The names of variables and functions are clear and descriptive.
• The code is formulated using Prettier .

Starting files

• In the SRC folder you will find starting files with base markup and ready styles. Copy them in the project. To do this, download this repository as an archive or use the Downgit service to download a separate folder from the repository.
• gallery-items.js file contains an array galleryItems , which contains objects with image information: small (preview), original (large) and description. We have already connected it to each of the JS project files.

Task 1 - Image Gallery

Create a gallery with the possibility of a click on its elements and view a full -size image in a modal window. See the demo video of the gallery.

gallery-dmo.mp4

Complete this task in 01-gallery.html and 01-gallery.js . Break it up into a few sub -calls:

1. Creating and Render markup based on galleryItems data array and the gallery element is provided.
2. Implementation of delegation on div.gallery and receiving a large image url .
3. Connecting the script and styles of the BasiclightBox modal window. Use the JSDELIVR CDN and add a library file ( .min ) to the project.
4. Opening a modal window on a click on a gallery element. To do this, get acquainted with the documentation and examples.
5. Replacing the value of the attribute of the src element <img> in the modal window before opening. Use a ready -made modal window marking with BasiclightBox library examples.

Marking of the gallery element

The original image reference must be stored in the source Data Attribute on the <img> item and indicated in href link. Do not add other HTML tags or CSS classes except those contained in this template.

 < 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 >

Please note that the image is wrapped in a link, so the user will be redirected to another page by default. Prohibition of this default behavior.

Closing from the keyboard

️ The following functionality is not required for the task, but will be a good extra practice.

Add the closure of the modal window after pressing the Escape key. Make the keyboard listening to only as long as the modal window is open. Basiclightbox libraries contain a method for software closure of the modal window.

Task 2 - SimpleLightbox Library

Make the same gallery as in the first task, but using the SimplelightBox library, which will take the clicks on the images, discovering and closing the modal window, as well as shaking images with the keyboard.

SIMPLELIGHTBOX- DEMO.MP4

It is necessary to change the gallery card marking slightly, use this template.

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

Complete this task in 02-lightbox.html and 02-lightbox.js . Break it up into a few sub -calls:

1. Creating and Render markup based on galleryItems data array and the gallery element is provided. Use a ready -made code from the first task.
2. Connecting the script and library styles using CDN CDNJS. You need to add links to two files: simple-lightbox.min.js and simple-lightbox.min.css .
3. Initialization of the library after creating and adding elements of the gallery in div.gallery . To do this, get acquainted with SimplelightBox documentation - first of all, USAGE and MARKUP sections.
4. Look at the documentation section "Options" and add a display of signatures to the images from the attribute alt . Let the signature be from below and appear in 250 milliseconds after the image is opened.