jQueryでサムネイルから画像切り替えできるイメージギャラリー機能を実装する
jQueryネットショップなんかで、複数のサムネイルがついた商品写真のコンテンツをよく見かけますよね。今回はそのコンテンツに、サムネイルをクリックもしくはマウスオーバーで、メインの写真がサムネイルに対応した画像に切り替わる機能を実装していきたいと思います。
HTML5のカスタムデータ属性を使う
今回の実装でポイントとなるのは、HTMLのカスタムデータ属性を使う点です。このカスタムデータ属性（独自データ属性とも）とは、要素に対して新たに属性値を設定できる機能です。当ブログでも過去にこのカスタムデータ属性を使って、ツールチップを表示させる機能を「HTMLのdata属性を使ってツールチップを実装する」の記事で紹介しました。
今回はこのカスタムデータ属性をjQueryで扱うことで、コンパクトなコードで実装することができます。ということでまずはコードを見ていきます。
【HTML】※一部抜粋
<dl class="gallery">
<dt>
<img id="main-image" src="./sample-main-01.jpg" alt="メインイメージ1">
</dt>
<dd>
<ul>
<li><img class="thumbnail" data-url="./sample-main-01.jpg" src="./sample-thumbnail-01.jpg" alt="サムネイル1"></li>
<li><img class="thumbnail" data-url="./sample-main-02.jpg" src="./sample-thumbnail-02.jpg" alt="サムネイル2"></li>
<li><img class="thumbnail" data-url="./sample-main-03.jpg" src="./sample-thumbnail-03.jpg" alt="サムネイル3"></li>
<li><img class="thumbnail" data-url="./sample-main-04.jpg" src="./sample-thumbnail-04.jpg" alt="サムネイル4"></li>
</ul>
</dd>
</dl>
HTMLは比較的シンプルに、メインイメージ1つとサムネイル画像を複数枚用意します。ただしここでサムネイル画像の要素に先ほど説明したカスタムデータ属性を設定します。値には、それぞれのサムネイルに対応する画像のパスを入れます。あとのデザインやレイアウトはCSSで適宜調整します。
【javascript】
$(function(){
$(".thumbnail").on('mouseover touchend',function(){
var dataUrl = $(this).attr('data-url');
$("#main-image").attr('src',dataUrl);
});
});
jQueryの方は非常にシンプルで、サムネイルに対してマウスオーバー（ここではモバイル用にタッチイベントも設定）した時に、そのサムネイルのカスタムデータ属性の値、すなわち画像パスを取得し、メインイメージの画像パスを取得したものに書き換えるという仕組みです。もちろん、マウスオーバーではなくクリックなどに設定することも可能です。
このようにHTMLのカスタムデータ属性を使うことで簡単にjQueryで実装することができます。ネットショップなどのECサイトでは必ずと言っていいほど搭載されている機能ですので重宝するかと思います。今回のサンプルはこちらに用意しましたので、よかったらご参考ください。
-
-
この記事を書いた人オガワ シンヤ
DesignSupply.代表 ／ ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中！制作中はチョコレートが欠かせない三十路Webクリエイター。
制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら
デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。
ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。
コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。
