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窗口標記，其中包含BasicLightBox庫的示例。

畫廊元素的標記

原始圖像參考必須存儲在<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毫秒內。