画像を拡大表示する時の定番の見せ方であるLightboxを、簡単に実装できるjQueryプラグインです。

サムネイルクリックで画像を拡大し、拡大した画像をクリックすると次の画像へと進んでいきます。
今回使用したのは、jQueryプラグインColorboxです。

↓以下が実際のソースサンプルです。

▼JavaScript

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="colorbox.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.colorbox-min.js"></script>
<script>
$(document).ready(function(){
	
	$(".season").colorbox({rel:'season'});
	
});
</script>

▼CSS

<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
ul{
	float:left;
	background-color:#FFF;
	border:3px solid #000;
	border-radius:10px;
	padding: 10px 5px 10px 10px;
	width: 450px;
}
ul,li {
	list-style: none;
	float:left;
	margin-right:10px;
}
li a {
    display: block;
    height: 65px;
    overflow: hidden;
}		 
</style>

▼HTML

<ul>
<li><a href="images/01.jpg" class="season" title="春"><img src="images/01.jpg" width="100" alt=""></a></li>
<li><a href="images/02.jpg" class="season" title="夏"><img src="images/02.jpg" width="100" alt=""></a></li>
<li><a href="images/03.jpg" class="season" title="秋"><img src="images/03.jpg" width="100" alt=""></a></li>
<li><a href="images/04.jpg" class="season" title="冬"><img src="images/04.jpg" width="100" alt=""></a></li>
</ul>

今回、参考にさせていただいたのは、
『【jQuery】Lightbox表示の画像ギャラリーを簡単に設置できるプラグイン「Colorbox」の使い方』さんです。
ありがとうございます。

デモページは、こちら