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

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

Contents

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

クリックしたサムネイルにメイン画像を切り替えるCSSの記述

※サムネイルエリア（.boxwrap .simg）とメイン画像エリア（.boxwrap .bimg）の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>

クリックしたサムネイルにメイン画像を切り替える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>