goit js hw 07

他の言語を読んでください：ウクライナ人、英語。

受け入れ基準

• goit-js-hw-07リポジトリが作成されました。
• 宿題には2つのリンクが含まれています。出力ファイルとGitHub Pagesの作業ページです。
• コンソールには、タスクのリビングページを開くときにエラーと警告がありません。
• 変数と関数の名前は明確で記述的です。
• コードは、 Prettierを使用して策定されます。

ファイルを起動します

• SRCフォルダーには、ベースマークアップと準備ができたスタイルを備えた起動ファイルがあります。プロジェクトでそれらをコピーします。これを行うには、このリポジトリをアーカイブとしてダウンロードするか、ダウンギットサービスを使用してリポジトリから個別のフォルダーをダウンロードします。
• 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>の属性の値を置き換えます。 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 >

画像はリンクに包まれているため、ユーザーはデフォルトで別のページにリダイレクトされることに注意してください。このデフォルトの動作の禁止。

キーボードから閉じます

ショ和タスクには次の機能は必要ありませんが、適切な追加の練習になります。

Escapeキーを押した後、モーダルウィンドウの閉鎖を追加します。モーダルウィンドウが開いている限り、キーボードを聴くだけです。 Basiclightboxライブラリには、モーダルウィンドウのソフトウェア閉鎖方法が含まれています。

タスク2 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データアレイとギャラリー要素に基づいてマークアップを作成およびレンダリングします。最初のタスクから準備ができたコードを使用します。
2. CDN CDNJを使用してスクリプトとライブラリのスタイルを接続します。 simple-lightbox.min.jsとsimple-lightbox.min.cssの2つのファイルにリンクを追加する必要があります。
3. div.galleryのギャラリーの要素を作成および追加した後のライブラリの初期化。これを行うには、SimplElightboxのドキュメントに精通してください - まず、使用法とマークアップセクション。
4. ドキュメントセクション「オプション」を見て、属性altの画像に署名の表示を追加します。署名を下から、画像を開いた後に250ミリ秒で表示します。