Ownedmedia ウェブ制作に役立つコンテンツを発信中!

jQuery 2017.10.28

jQueryでサムネイルから画像切り替えできるイメージギャラリー機能を実装する

Tags: ,,
最終更新日:Update

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

 

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

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?