0%

Programmingプログラミングナレッジ

Posted:2017.10.28

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

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】