画像ギャラリーの作り方

サムネイル画像を並べて置き、クリックしたものを拡大表示するUI機能の一種です。今回は拡大表示とスライド機能を組み合わせました。

画像ギャラリーのおすすめの使い方

上記のメリットの他に、デザイン的に華やかになるのも特徴かもしれません。写真やイラストの他、WEBデザインなどのポートフォリオ用に使われることもあります。

HTMLとCSSで選択用のギャラリーと、表示用のディスプレイ・スペースを作ります。表示用スペースは非表示にして置き、サムネイル画像をクリックしたときにJAVASCRIPTによって、表示用クラスを付与します。

表示用スペースは先に紹介したモーダルウインドウの応用で作っています。全画面サイズのDIV要素を重ねて、画像ギャラリー用のUI以外はコントロール不能にしました。スライダーは簡素なものにしています。ギャラリーから画像枚数と、それぞれのURLを取得して順番に表示させています。

画像を追加しても、特にJAVASCRIPTの方は修正する必要はありません。HTMLのIMGタグをコピペ＆削減すれば自由に画像の枚数を変更できます。

今後の目標

画像サイズを変更した場合に表示が崩れそうなので、そこを修正しようと思っています。現状ではあまり汎用性が高くないため、ソースコードはもう少し完成度を増してから公開できればと考えています。

まとめ

自作の画像ギャラリーの紹介でした。アニメーション機能をつけたり、スライダーを追加した分、ソースコードがややこしくなりました。もっとシンプルで使いやすいものを、ソースコード付きで紹介できるようにします。