JavaScript PR

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

記事内に商品プロモーションを含む場合があります

jQueryの.attr()を使って、クリックしたサムネイルにメイン画像を切り替える方法をご紹介します。
imgタグのsrc要素をjQueryの.attr()を使って書き換えます。商品紹介カタログサイト等で使えます。

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

※サムネイルエリア(.boxwrap .simg)とメイン画像エリア(.boxwrap .bimg)のCSS記述です。必要に応じて書き換えてください。

<style>
body{
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",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>

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

※サムネイルエリア(class=”simg”)のliタグに3つのjpg画像を用意しました。メイン画像エリア(class=”bimg”)にデフォルト表示のjpg画像を記述します。必要に応じて書き換えてください。

<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>

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

※jquery.min.jsファイルを読み込みます。サムネイルエリア(.simg ul li)クリックでサムネイルエリアの画像ファイルを取得し、メイン画像エリア(.bimg)にある画像ファイル名に書き換えます。

<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>

クリックしたサムネイルにメイン画像を切り替えるデモページ

クリックしたサムネイルにメイン画像を切り替えるデモ

 
※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。