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

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

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

imgタグのsrc要素をjQueryのattrを使って書き換えます。
例えばタブレット用の商品紹介カタログサイト等で使えます。

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

2.HTMLの記述例

※必要に応じて書き換えてください。

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

3.読み込むJsファイルとJavaScritpの記述

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

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

※流用される場合は自己責任でお願いします。