サムネクリックでメイン画像切替
サムネイルをクリックすると大きなメイン画像が切り替わる、商品ギャラリーの定番です。各サムネは data-src に高解像度版の URL を持ち、クリックされるとその値をメイン画像の src へ差し替えます。
解説
サムネイルをクリックすると大きなメイン画像が切り替わる、商品ギャラリーの定番です。各サムネは data-src に高解像度版の URL を持ち、クリックされるとその値をメイン画像の src へ差し替えます。切替時は一度 opacity を0にして約150ミリ秒後に画像を入れ替え、transition:opacity でふわっと変わるよう見せています。選択中のサムネには is-on クラスが付き、枠線と不透明度で現在地が分かるのも要点です。サムネは小さい軽量版、メインは大きい版という出し分けで、無駄な読み込みを抑えています。
向く場面と調整
EC の商品詳細、作品ポートフォリオ、物件や料理の写真切替などに広く使えます。画像を増やすときはサムネの img を追加し、それぞれ data-src と表示用の小さい src を指定するだけです。alt はすべての画像に意味のある説明を入れることが重要で、商品名や状態が伝わる文言にします。切替の速さは setTimeout の待ち時間と transition の値で決まるので、もたつくと感じたら短くしてください。最初に表示する画像は is-on が付いたサムネと一致させておくと混乱がありません。
使用例・適したシーン
- 施工事例の比較
- リフォームのビフォーアフター
- 美容・施術の症例
よくある質問
画像を追加するには。
サムネ用の img を追加し、その img に高解像度版の data-src と表示用の小さな src を指定します。クリックでメインへ差し替わる仕組みは共通なので、追加分にもそのまま適用されます。
切替をもっと速く、または遅くしたい。
切替時の待ち時間を決める setTimeout の値と、CSS の transition の秒数を調整します。両方を短くするとキビキビ、長くするとゆっくりフェードして切り替わります。