こんにちは、ユアサです。
今回は写真ギャラリーの特定の写真をクリックしてモーダルで表示し、更にモーダル内で他の写真も閲覧できるモーダルギャラリーの実装をしていきたいと思います。
そもそもどうして自分で作成しようとしたのか
ギャラリーモーダルを実装するだけなら既存のプラグインを調べればいくらでも出てきますし、実装も簡単です。ただ実装するにあたって極力脱jQueryを目指していきたいというのが第一にあったので、大半のプラグインは候補から外れていきました。
非jQueryのものであれば動作の軽いluminousがありますが、htmlの書き方もオプション実装の際にも少しクセがあるので、他により良い方法があるならそちらを優先したいところです。
何ならギャラリーのオプションをより細かく設定できると嬉しいし・・・という欲張りな考えの末、モーダルは自作、ギャラリーは既存プラグインを使って実装すれば割と簡単に作れるかな？と思い作成することにしました。
とりあえず作ってみよう
早速作成後のものの紹介になりますが、以下が完成形です。
See the Pen gallery_modal by felly (@felly00505) on CodePen.
特定の写真をクリックするとモーダルが表示され、ギャラリー内の対象の写真まで移動する動作が確認できるかと思います。
モーダル自体はクラス.is-activeの付け外しをJSで制御して表示・非表示を切り替えるだけのものになります。今回ちょっとしたポイントになるのがモーダル内のギャラリーの方で、クリックした写真と同じものの位置までギャラリー内のスライドが移動する挙動について紹介します。
ギャラリーに使用しているプラグインは「Splide」で、スライダー実装であればお馴染みのSwiper同様のスライダープラグインです。アクセシビリティ向上に力を入れているプラグインで、画像の遅延読み込みも簡単に実装できる上Swiperに比べて挙動がはるかに軽量なのが魅力です。
何より公式サイトが日本語なのが非常にありがたいですね。よければ使ってみてください。
さて少し話が逸れましたので元に戻します。
このSplideのチュートリアルページにも紹介されているギャラリーの作成を参考にして作成しました。サムネイル諸々のhtmlは事前に準備しておくとして、ページ内の以下の箇所で主なJSが紹介されています。
記述されている通り、サムネイルの写真を配列で一通り取得した後に何番目の写真がクリックされたかを判定して、ギャラリー内の同じ順番の写真の位置まで移動させるといった内容になっています。
このJSから読み取れる通り、実装するにあたってサムネイルとギャラリーの写真の並び順を揃えておく必要があるので、そこは注意しておくといいかと思います。
まとめ
ほとんどSplideの既存オプションに助けられているので、蓋を開けてみると今回作成したものはモーダルだけでしたね。でもこれで自分の好みのスライダープラグインを使ってギャラリーモーダルが作成できるので、結構使える方法なんじゃないかなーと思っています。
もちろんSwiperでも同じように実装できるオプションがあるので、今回Splideで実装していた箇所をそのままSwiperの仕様に置き換えれば再現可能です。
しかし画像のキャプションを表示できていなかったりモーダルのhtmlが非表示の時でもコード上に残ってしまっているなど課題がまだあるので、次回の記事ではより改良していく内容をまとめていきたいと思います。
