jqueryを使って、サムネイル画像にマウスオーバーするとメイン画像を切り替えて大きく表示します。
ヘッダーで、jquery.jsと後述のswapimage.jsを読み込んでいます。
2014.01.24 同ページで複数設置できるように改訂。
キャプションつきの場合は、こちら↓
[キャプション付き]サムネイルの画像をマウスオーバーで拡大・切り替え・表示します！
サムネイルにリンクをつけたい場合は、こちら↓
[リンク付き]サムネイル画像をマウスオーバーで画像拡大、クリックでページ遷移
JSを読み込みます
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="js/swapimage.js"></script>
[swapimage.js]JavaScript
$(function(){
$(".mod_thumbnail").each(function(){
var set = $(this);
var btn = set.find(".thumbnaillist li a");
var image = set.find(".mainimglist img");
// hover時
$(btn).hover(function(){
$(image).attr("src",$(this).attr("href"));
$(image).attr("alt",$(this).attr("title"));
});
//クリック時
$(".thumbnaillist a").click(function(){
return false;
});
});
});
HTMl
<div class="mod_thumbnail"> <div class="thumbnaillist"> <ul class="ex_clearfix"> <li><a href="img/image01.jpg" title="orange"><img src="img/thumbnail01.jpg" width="60" height="60"></a></li> <li><a href="img/image02.jpg" title="green"><img src="img/thumbnail02.jpg" width="60" height="60"></a></li> <li><a href="img/image03.jpg" title="pink"><img src="img/thumbnail03.jpg" width="60" height="60"></a></li> <li><a href="img/image04.jpg" title="blue"><img src="img/thumbnail04.jpg" width="60" height="60"></a></li> </ul> <!-- thumbnaillist_end --></div> <div class="mainimglist"> <img src="img/image01.jpg" alt="orange" width="700" height="350"> <!-- mainimglist_end --></div> <!-- mod_thumbnail_end --></div>
CSS
/* mod_thumbnail
--------------------------------------------*/
.mod_thumbnail{
margin:0 0 30px 0;
}
/* サムネイル画像表示（thumbnaillist）
-----------------------------------------*/
.thumbnaillist{
}
.thumbnaillist ul{
}
.thumbnaillist li{
width:60px;
height:60px;
float:left;
background:none;
padding:0 10px 0px 0;
margin:0 0 10px 0;
}
.thumbnaillist li a{
display:block;
}
.thumbnaillist li a:link {}
.thumbnaillist li a:visited {}
.thumbnaillist li a:hover {opacity:0.8;}
.thumbnaillist li a:active {opacity:0.8;}
/* IE用 ↓*/
.thumbnaillist li a:hover img {filter:alpha(opacity=80);}
/* メイン画像表示（mod_mainimglist）
-----------------------------------------*/
.mainimglist{
width:700px;
height:350px;
margin:20px 0 0 0;
}
.mainimglist img{
}