画像ギャラリーについて
サムネイル画像を並べて置き、クリックしたものを拡大表示するUI機能の一種です。今回は拡大表示とスライド機能を組み合わせました。
画像ギャラリーのおすすめの使い方
- たくさんの画像を整然と表示したい
- コンテンツを俯瞰的に見てほしい
- クリックさせてアクションのきっかけを作る
上記のメリットの他に、デザイン的に華やかになるのも特徴かもしれません。写真やイラストの他、WEBデザインなどのポートフォリオ用に使われることもあります。
画像ギャラリーの作り方
HTMLとCSSで選択用のギャラリーと、表示用のディスプレイ・スペースを作ります。表示用スペースは非表示にして置き、サムネイル画像をクリックしたときにJAVASCRIPTによって、表示用クラスを付与します。
表示用スペースは先に紹介したモーダルウインドウの応用で作っています。全画面サイズのDIV要素を重ねて、画像ギャラリー用のUI以外はコントロール不能にしました。スライダーは簡素なものにしています。ギャラリーから画像枚数と、それぞれのURLを取得して順番に表示させています。
画像を追加しても、特にJAVASCRIPTの方は修正する必要はありません。HTMLのIMGタグをコピペ&削減すれば自由に画像の枚数を変更できます。
今後の目標
画像サイズを変更した場合に表示が崩れそうなので、そこを修正しようと思っています。現状ではあまり汎用性が高くないため、ソースコードはもう少し完成度を増してから公開できればと考えています。
まとめ
自作の画像ギャラリーの紹介でした。アニメーション機能をつけたり、スライダーを追加した分、ソースコードがややこしくなりました。もっとシンプルで使いやすいものを、ソースコード付きで紹介できるようにします。