メインエリアとサブエリアを使ったフォト(イメージ・画像)ギャラリーを作る。ARTICLE【FE風花雪月】煤闇の章、ハードクラシック攻略4日目【ファイアーエムブレム】HOME技術系cssメインエリアとサブエリアを使ったフォト(イメージ・画像)ギャラリーを作る。メインエリアとサブエリアを使ったフォト(イメージ・画像)ギャラリーを作る。技術スポンサードリンク仕事でフォトギャラリーを作成する機会があった。メインのイメージ領域があり、下にサブのサムネイルリストがあり、クリックするとメインに大きな画像が表示されるような画像一覧だ。Amazonの画像欄などによくあるあれである。今回はその作成方法を解説する。まとめフォトギャラリーとはあまり適切な言葉が浮かばなかったので、フォトギャラリーという言葉を使ったが、正直これでどういうものかパッと思い浮かぶ人はいないと思う。(自分もこれが正式名称なのかは分からない・・・。画像カルーセルとかの一種なのかもしれないし、もっと単純に画像リストとか、サムネイル一覧とかかもしれない。)なので、今回はまず実装したものを置いてみる。以下がフォトギャラリー。CodePen.0jQuery・css解説jQueryjQueryはたった四行。$(this).clone().appendTo(".main-area");});サブ領域の画像がクリックされたら、メイン領域の画像を削除(2行目)し、そこにクリックされた要素($(this))をコピー(clone)して追加(appendTo)するだけである。下にサブイメージとしてサムネイルを表示するということをしている。今回はoverflow-xをscrollにしたが、横に縦画像を表示しても良いかもしれない。動画も追加してみるこの並びに更に動画を追加してみる。今回は以前ゲームの攻略記事で投稿したyoutube動画を埋め込んでみる。CodePen.0ついでに縦並びにしてみたりする。動画はyoutubeの共有ボタンをクリック→「埋め込む」をクリックして出てくるコードをコピペして貼り付けるだけでOK。一点画像にはない注意として、「サムネの動画でも、何もしないとクリックしたら動画を再生してしまう」というのがある。none;を使って、動画を再生できないようにしておこう。(pointer-eventは、クリック時のイベントを制御できる便利なcssである。)ただし、指定する位置を間違えると、クリックイベントをjQueryでとれなくなるので注意。今回画像や動画をdivで覆っているのは、共通処理でcloneが出来るようにするため、というのもあるが、iframeにpointer-eventsを指定して、divをクリック出来るようにするためでもある。まとめ今回はフォトギャラリーを追加してみた。メリットは、画像カルーセルなどと違って、ユーザーが気になったサムネイルをすぐクリック(タップ)することができることだろう。画像が小さいので、サムネイルで気にならなかったために機会を損失することもありうる。ケースバイケースで臨機応変に使っていきたい。個人的にはこっちの方がカルーセルより好き。墓守になって善人・悪人プレイを楽しもう。Keeper(グレイブヤードキーパー)やってみた。某配送システム白猫プロジェクトのアイシャが大好きなエンジニアの卵。Java/Shell/C++/HTML/Sass/rustかgoやりたい。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。WordPress.。