ネットショップなんかで、複数のサムネイルがついた商品写真のコンテンツをよく見かけますよね。今回はそのコンテンツに、サムネイルをクリックもしくはマウスオーバーで、メインの写真がサムネイルに対応した画像に切り替わる機能を実装していきたいと思います。

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サイトでは必ずと言っていいほど搭載されている機能ですので重宝するかと思います。今回のサンプルはこちらに用意しましたので、よかったらご参考ください。