【.attr()】クリックしたサムネイルにメイン画像を切り替え｜DAD UNION

今回は、jQueryの .attr() メソッドを使用して、クリックしたサムネイル画像をメイン画像に切り替える方法について解説します。この手法は、商品カタログサイトやギャラリーなど、さまざまな場面で利用できるため、エンジニアにおすすめです。
具体的には、imgタグの src 属性を jQuery の .attr() を使って書き換える方法を説明していきます。

Contents

サムネイルとメイン画像のCSSの記述
サムネイルエリアとメイン画像エリアのHTMLの記述
jQueryの.attr()を使って、クリックしたサムネイルにメイン画像を切り替えるJavaScriptの記述
クリックしたサムネイルにメイン画像を切り替えるデモページ
まとめ

サムネイルとメイン画像のCSSの記述

まず、サムネイル画像エリア（.boxwrap .simg）とメイン画像エリア（.boxwrap .bimg）のCSSスタイルを定義します。以下のコードを元に、必要に応じてCSSの調整を行ってください。

<style>
body{
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
	padding: 0;
	margin: 0;
	overflow-x: hidden;
}
ol, ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
img {
    vertical-align: bottom;
    -webkit-backface-visibility: hidden;
}
h1{
	font-size:18px;
	line-height:1.6em;
	text-align:center;
	font-weight:normal;
	padding:10px 0;
}
.boxwrap{
  overflow: hidden;
  width: 920px;
  margin: 0 auto;
}
.boxwrap .bimg{
  width: 800px;
  height: auto;
  overflow: hidden;
  float: left;
}
.boxwrap .simg{
  float: left;
  margin-left: 20px;
  width: 100px;
}
.boxwrap .simg ul{
  width: 100%;
}
.boxwrap ul li{
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 10px;
  cursor: pointer;
}
.boxwrap ul li:hover{
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
}
</style>

上記のスタイルでは、全体のレイアウトを整えるために .boxwrap クラスを使用し、その中にメイン画像エリア（.bimg）とサムネイル画像エリア（.simg）を配置しています。サムネイル画像エリアには ul タグを使い、各サムネイル画像をリスト項目として表示します。

サムネイルエリアとメイン画像エリアのHTMLの記述

次に、サムネイルエリアとメイン画像エリアのHTMLコードを記述します。サムネイルエリアには class=”simg” を付与し、li タグ内にサムネイル画像を配置します。また、メイン画像エリアには class=”bimg” を指定し、デフォルト表示用の画像を設定します。

<h1>右側のサムネイルをクリックすると、左側のメイン画像が切替わります</h1>

  <div class="boxwrap">
    <div class="bimg"><img src="i1.jpg" alt="" width="100%"></div>
    <div class="simg">
      <ul>
        <li><img src="i1.jpg" alt="" width="100%"></li>
        <li><img src="i2.jpg" alt="" width="100%"></li>
        <li><img src="i3.jpg" alt="" width="100%"></li>
      </ul>
    </div>
  </div>

上記のHTMLでは、サムネイル画像として3つのjpg画像（i1.jpg, i2.jpg, i3.jpg）を用意しています。クリックしたサムネイルに応じて、メイン画像エリア内の画像が切り替わる仕組みを構築していきます。

jQueryの.attr()を使って、クリックしたサムネイルにメイン画像を切り替えるJavaScriptの記述

ここから、JavaScript（jQuery）を使って、クリックイベントに応じてメイン画像を変更する機能を追加します。事前に jQuery ライブラリ（jquery.min.js）を読み込む必要があります。

<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function () {
	$(".simg ul li").click(function(){
		$(".bimg").children('img').attr("src",$(this).children("img").attr('src'));
	});
});
</script>

このスクリプトでは、サムネイルエリア（.simg ul li）のクリックイベントを設定しています。click イベントが発生すると、クリックされたサムネイル画像の src 属性を取得し、それをメイン画像エリア（.bimg）内の画像の src 属性に反映させています。これにより、クリックしたサムネイルの画像にメイン画像が切り替わるようになります。