goit js hw 07

阅读其他语言：乌克兰，英语。

接受标准

• 创建了goit-js-hw-07存储库。
• 作业包含两个链接：在输出文件和GitHub Pages上的工作页面。
• 打开任务的生活页面时，控制台缺乏错误和警告。
• 变量和函数的名称是清晰且描述性的。
• 该代码是使用Prettier制定的。

启动文件

• 在SRC文件夹中，您会发现使用基本标记和现成样式的启动文件。在项目中复制它们。为此，请下载此存储库作为存档，或使用Downgit服务从存储库下载单独的文件夹。
• gallery-items.js文件包含一个galleryItems数组，其中包含带有图像信息的对象：小（预览），原始（大）和描述。我们已经将其连接到每个JS项目文件。

任务1-图片库

创建一个画廊，可以单击其元素，并在模态窗口中查看完整尺寸的图像。请参阅画廊的演示视频。

Gallery-dmo.mp4

在01-gallery.html和01-gallery.js中完成此任务。将其分解为几个子呼叫：

1. 提供了基于galleryItems数据阵列和画廊元素的创建和渲染标记。
2. 在div.gallery上实施代表团并接收大图url 。
3. 连接BasicLightBox模态窗口的脚本和样式。使用JSDELIVR CDN，然后在项目中添加一个库文件（ .min ）。
4. 单击画廊元素上的单击模式窗口。为此，请熟悉文档和示例。
5. 在打开之前，在模态窗口中替换src元素<img>的属性值。使用基本灯库库示例使用Ready -Made Modal窗口标记。

画廊元素的标记

原始图像参考必须存储在<img>项目上的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 >

请注意，图像包裹在链接中，因此默认情况下将将用户重定向到另一页。禁止这种默认行为。

从键盘关闭

配x任务不需要以下功能，但将是一个很好的额外练习。

按下Escape键后，添加模态窗口的闭合。只要模态窗口打开，键盘就会收听。 BasicLightBox库包含一种用于封闭模式窗口的方法。

任务2 SimpleLightbox库

制作与第一个任务相同的画廊，但是使用SimpleLightBox库，该库将在图像上单击，发现和关闭模态窗口，并使用键盘摇动图像。

SimpleLightBox- demo.mp4

有必要稍微更改图库卡标记，使用此模板。

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

在02-lightbox.html和02-lightbox.js中完成此任务。将其分解为几个子呼叫：

1. 提供了基于galleryItems数据阵列和画廊元素的创建和渲染标记。在第一个任务中使用Ready -MADE代码。
2. 使用CDN CDNJS连接脚本和库样式。您需要添加到两个文件的链接： simple-lightbox.min.js和simple-lightbox.min.css 。
3. 在div.gallery中创建和添加图库的元素后，库的初始化。为此，请熟悉SimpleLightbox文档 - 首先，使用和标记部分。
4. 查看文档部分“选项”，并在属性alt中添加签名显示。打开图像后，让签名从下面出现在250毫秒内。