メインエリアとサブエリアを使ったフォト(イメージ・画像)ギャラリーを作る。

メインエリアとサブエリアを使ったフォト(イメージ・画像)ギャラリーを作る。

仕事でフォトギャラリーを作成する機会があった。
メインのイメージ領域があり、下にサブのサムネイルリストがあり、
クリックするとメインに大きな画像が表示されるような画像一覧だ。
Amazonの画像欄などによくあるあれである。今回はその作成方法を解説する。

フォトギャラリーとは

あまり適切な言葉が浮かばなかったので、
フォトギャラリーという言葉を使ったが、正直これでどういうものかパッと思い浮かぶ人はいないと思う。
(自分もこれが正式名称なのかは分からない・・・。
画像カルーセルとかの一種なのかもしれないし、もっと単純に画像リストとか、サムネイル一覧とかかもしれない。)
なので、今回はまず実装したものを置いてみる。以下がフォトギャラリー

See the Pen gallary by blue (@aoiBlue) on CodePen.0

jQuery・css解説

jQuery

jQueryはたった四行。

$(".sub-image").children("img").on("click", function(){
    $(".main-area").children("img").remove();
    $(this).clone().appendTo(".main-area");
});

サブ領域の画像がクリックされたら、
メイン領域の画像を削除(2行目)し、
そこにクリックされた要素($(this))をコピー(clone)して追加(appendTo)するだけである。

css

cssも単純で、メイン領域にサイズの大きい画像、
下にサブイメージとしてサムネイルを表示するということをしている。
今回はoverflow-xをscrollにしたが、横に縦画像を表示しても良いかもしれない。

動画も追加してみる

この並びに更に動画を追加してみる。
今回は以前ゲームの攻略記事で投稿したyoutube動画を埋め込んでみる。

See the Pen gallary by blue (@aoiBlue) on CodePen.0


ついでに縦並びにしてみたりする。
動画はyoutubeの共有ボタンをクリック→「埋め込む」をクリックして出てくるコードをコピペして貼り付けるだけでOK。
一点画像にはない注意として、「サムネの動画でも、何もしないとクリックしたら動画を再生してしまう」というのがある。
なので、

pointer-events: none;

を使って、動画を再生できないようにしておこう。
(pointer-eventは、クリック時のイベントを制御できる便利なcssである。)
ただし、指定する位置を間違えると、クリックイベントをjQueryでとれなくなるので注意。
今回画像や動画をdivで覆っているのは、共通処理でcloneが出来るようにするため、
というのもあるが、iframeにpointer-eventsを指定して、
divをクリック出来るようにするためでもある。

まとめ

今回はフォトギャラリーを追加してみた。
一番のメリットは、画像カルーセルなどと違って、
ユーザーが気になったサムネイルをすぐクリック(タップ)することができることだろう。
ただ、画像が小さいので、サムネイルで気にならなかったために機会を損失することもありうる。
ケースバイケースで臨機応変に使っていきたい。
個人的にはこっちの方がカルーセルより好き。