ギャラリービュー

ギャラリービューの対象要素を特定し、変数に格納します。
子要素の画像一覧も変数に格納します。
childrenで取得した値はそのままでは反復処理ができないため、Array.from()で配列に変換します。

ギャラリービューに必要となる要素を作っていきます。
まずは全ての入れ物になる要素galleryです。
画面を覆い、子要素を上下中央配置にするようなスタイルを当てておきます。
次に画面を黒の半透明で覆うoverlayです。
兄弟要素よりも下に表示されるようにz-index: -1;にしておきます。
画像表示を前後に切り替えるprevとnext、画像の入れ物になるgalleryImageも定義します。

ギャラリービューに表示する画像は、先に取得していた画像一覧imagesの各要素を複製して用意します。

ここまでに作った要素を配置していきます。
galleryはdocument.bodyの一番後ろに配置します。
overlay、prev、next、galleryImageはgalleryの中に配置します。
prev -> galleryImage -> nextという順番は実際に横並びで表示される順番になっています。
複製した画像は反復処理でgalleryImageの中に配置します。

表示切り替えの関数を作っていきます。
まずは画像の切り替え関数です。
showClonedImageは指定された位置の画像１つを表示します。
hideClonedImageは画像全てを非表示にします。

続いてギャラリービュー全体の切り替え関数です。
showGalleryはギャラリービュー全体を表示するとともに、引数を受け取ってshowClonedImage関数を呼んで画像１つを表示します。
displayの設定値は元々設定されているflexにします。
hideGalleryはギャラリービュー全体を非表示するとともに、hideClonedImage関数を呼んで画像全てを非表示にします。
初期状態を非表示にするためhideGalleryを呼んでおきます。

サムネイル画像の表示とそれが押されたときのイベントを設定していきます。
現在の表示位置を保持する変数currentIndexを定義しておきます。
先に取得した画像一覧で反復処理を行い、サムネイル画像になるようにサイズなどのスタイルを調整します。
クリックイベントでは自身の位置を取得してcurrentIndexを更新、その後にギャラリービューの中に配置した複製画像を表示するように関数showGallery(位置)を呼びます。

ギャラリービューの中に表示する「前へ」、「次へ」というテキストの表示切り替え関数を定義します。
それぞれ前の画像、次の画像がないときには非表示にします。

「前へ」、「次へ」テキストが押されたときのイベントを設定します。
最初にギャラリービュー内の画像を関数hideClonedImage全て非表示にします。
続いて現在の表示位置currentIndexを更新するとともに、画像切り替え関数showClonedImageを呼びます。
最後に「前へ」、「次へ」テキストの表示切り替え関数switchTriggerDisplayを呼びます。

オーバーレイが押されたときには関数hideGalleryでギャラリービューを非表示にします。