JavaScriptでサムネ画像をクリックしてメイン画像の切り替え
2570 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
サイトでよく見かける実装内容でサムネイル画像をクリックするとメイン画像の切り替わりがあります。
↓はデモサイトになっています。
これをJavaScriptで実装する方法について解説します。
コードが長くないので理解しましょう。
それでは解説します。
デモページ
デモページはここです。
考え方とコード
まずは↓の状態を作ります。（この時点ではサムネイル画像をクリックしてもメイン画像は切り替わりません）
HTMLのコードを↓にします。
CSSのコードは↓にします。
今回の実装はサイトで使う事を想定していますがサイトを作成する時は必ずreset.cssを入れるので私が普段使うreset.cssを記載しています。
私と同じreset.cssを入れなくてもいいので必ずあなたが普段使うreset.cssを入れてください。
15行目・18行目・21行目に「data-image=”〜”」がありますが「data-任意の名前」をカスタムデータ属性と言います。
これはJavaScriptの説明の時に必要になるのでそこで説明します。
HTMLは画像を表示しているだけなのでカスタムデータ属性以外は特に説明は必要がないと思います。
次はJavaScriptですがカスタムデータ属性の使い方を併せて説明ます。
JavaScriptのコードを↓にします。
1行目の「document.querySelectorAll(‘.thumb’)」ですが全ての「thumb」クラス を取得して配列にしています。
そして配列の全ての要素を使うために3行目に「forEach文」を使っています。
3行目の「function」の引数に「img」と「index」がありますが「img」は1行目の「thumbクラス」の事です。
「index」に関してですが1行目の「querySelectorAll」から「thumbクラス」の配列ができますがそれのインデックス番号（配列に付く番号）です。
4行目は「thumbクラス」（画像）をクリックした時の動きです。
まずメイン画像（HTMLの11行目）を切り替えることができるようにするために「document.getElementById」でメイン画像のid属性を取得します。（6行目）
クリックしたサムネ画像の画像パスをメインの画像の画像パスに切り替えるのですがHTMLにカスタムデータ属性を使います。（HTMLの15行目・18行目・21行目）
カスタムデータ属性の書き方は「data-任意の名前」なのですが今回は「data-image」にします。
data-image属性の値は画像のパスにします。（HTMLの15行目・18行目・21行目を見てください）
そして7行目でメイン画像のパスをクリックしたサムネイル画像のパスに書き換えます。
7行目は「mainImg.src = this.dataset.image;」ですが左辺はメイン画像のパスで右辺がサムネイル画像のパスです。
HTMLでカスタムデータ属性を指定（data-imageにした）してそれを（JavaScriptで）使う時は「要素.dataset.任意の名前」（任意の名前はimage）にします。（背景色を対応させてください）
カスタムデータ属性の使い方の流れをまとめると↓です。
- HTMLでカスタムデータ属性を指定（data-image=”〜”）
- JavaScriptで使う時は「要素.dataset.image」
「要素.dataset.image」ですが7行目は「this.dataset.image」になっています。
「this」は状況に応じて使い方が変わるのですが今回はサムネイル画像のimgタグ（HTMLの15行目・18行目・21行目）です。
「this」に関してはこの記事に詳しい解説があります。
これで完成です。