【jQuery】サムネイルをクリックするとメイン画像が切り替わる

公開日： 2016/02/27 : 最終更新日：2016/03/24 jQuery

サムネイルをクリックすると、上の大きい画像がサムネイルの画像と切り替わるようにします。

サンプル

1.jsファイルを作り、スクリプトを記述

「custom.js」など任意のファイルを作り、スクリプトを記述します。ファイルはjsフォルダなどに入れて整理。

jQuery(function($){
 $("#picbox img").bind("load",function(){
  var ImgHeight = $(this).height();
  $('#picbox').css('height',ImgHeight);
 });
 
 $('#gallery a').click(function(){
  if($(this).hasClass('over') == false){
   $('#gallery a').removeClass('over');
   $(this).addClass('over');
   $('#picbox img').hide().attr('src',$(this).attr('href')).fadeIn();
  };
  return false;
 }).filter(':eq(0)').click();
});

2.jQueryライブラリを読み込む

jQueryを使うために、HTMLにライブラリを読み込みます。
jQueryライブラリの読み込みは、jQuery公式サイトからダウンロードしたjQueryにリンクする方法と、CDNサーバーのURLに直接リンクを貼る方法があります。

①jQueryをダウンロードして読み込む方法

jQueryをダウンロードしてjsフォルダなどに格納します。

<head>～</head>内に書き込みます。

<script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>

②CDNサーバーのURLに直接リンクを貼る方法

jQueryが用意しているjQuery本体ファイルを読み込んで使用する場合

<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>

Microsoftが用意しているjQuery本体ファイルを読み込んで使用する場合

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>

Googleが用意しているjQuery本体ファイルを読み込んで使用する場合

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>

※「jquery.min.js」を先に記述し、「custom.js」を後に記述しないとうまく動作しません。

3.HTMLの画像を挿入したい箇所に記述

<div id="picbox"><img src="images/photo1.jpg" /></div>
<div id="gallery">
<ul>
<li><a href="images/photo1.jpg"><img src="images/photo1_s.jpg" / ></a></li>
<li><a href="images/photo2.jpg"><img src="images/photo2_s.jpg" / ></a></li>
<li><a href="images/photo3.jpg"><img src="images/photo3_s.jpg" / ></a></li>
<li><a href="images/photo4.jpg"><img src="images/photo4_s.jpg" / ></a></li>
</ul>
</div>

4.CSSでレイアウトを整える

※最低限のレイアウトですので、任意で追加してください。

#gallery ul{
 margin: 0;
 padding: 0;
 font-size: 0px;
}
#gallery li{
 list-style-type: none;
 display: inline;
}

※こちらのサイト様を参考にさせていただきました。

MEMO

CDNとは

Contents Delivery Networkの略で、コンテンツを効率的に配信することに特化したネットワークのこと。

jQueryは、ダウンロードする方法とCDNに直接リンクを貼る方法のどっちがいい？

jQueryは、公式サイトからライブラリファイルをダウンロードしてリンクすることもできますが、現在はCDNから読み込むのが主流です。jQueryは多くのサイトが利用しているため、閲覧者のブラウザにキャッシュが残っている可能性があります。キャッシュが残っていればダウンロードする可能性がなくなり、そのぶんページの表示が早くなるからです。

「jQuery」と「jQuery.min」の違い

※「jQuery」と「jQuery.min」は基本的に同じものです。minは無駄なスペースや改行を省いてサイズを小さくしたものです。
ソースを見たりカスタマイズする必要がなければminの方がいいと思います。

jQueryのバージョンについて

現在、jQueryには「バージョン1.x」と「バージョン2.x」の2つのバージョンがあります。
バージョン1.x系は、IE6、7、8との互換性があります。IEバージョン8以前のブラウザをサポートするには、バージョン1.x系を使用します。ただし、バージョン1.x系でも1.9以降は、あまり使われていない機能を廃止するなどjQueryライブラリ自体の抜本的な整理がされたため、以前にjQueryを使って作られたスクリプトやプラグインが動作しないことがあります。
バージョン2.x系は、提供する機能は1.x系と変わりませんが、IE6、7、8との互換性がありません。スマートフォン専用サイトを作るような場合を除いて、いまのところバージョン2.x系を使用するケースは多くありません。当サイトでも1.x系のjQueryを使用しています。