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

公開日: : 最終更新日: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を使用しています。



関連記事

【jQuery】プラグインなしでコンテンツを切り替えるタブメニューを作る

並んだタブをクリックすると、そのすぐ下のボックス内のコンテンツが切り替わります。タブはスマートフ...

記事を読む

【jQuery】プラグインなしで縦型のドロップダウンメニューを作る

jQueryのプラグインを使わない縦型のドロップダウンメニューの作り方です。CSSを変更すれば、...

記事を読む

【jQuery】プラグインなしで縦型のドロップダウンメニューを作る(現在の位置のメニューを開けた状態にする)

『【jQuery】プラグインなしで縦型のドロップダウンメニューを作る』で作ったドロップダウンメニ...

記事を読む

【jQueryプラグイン】FractionSlider:スライダー内の画像やテキストなどの要素に、さまざまな動きをつける

FractionSlider FractionSlider デモ   j...

記事を読む

【jQuery】開閉するボックスを作る

ボタンをクリックすると、隠されたボックスの表示/非表示を切り替えます。CSSプロパティを操作する...

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

no image
エコノミークラス症候群

エコノミークラス症候群とは?  エコノミークラス症候群は、旅行に関連

no image
巻き爪・陥入爪

巻き爪・陥入爪ってなに?  巻き爪とは、主に親指の爪の両端が「巻く」

no image
結婚お祝い金

披露宴に出る場合 祝儀袋の渡し方  受付でお祝いの言葉を述べ、祝儀

no image
結婚祝い

お祝い品選びと費用 お祝い品の選び方  新居を構える二人には、生活

no image
ダニ除去マニュアル

ダニ除去マニュアルについて  基本的なダニアレルゲン対策としては、

→もっと見る

PAGE TOP ↑