サムネイル画像をクリックするとメイン画像とキャプションを切り替えて大きく表示します。

ヘッダーで、jquery.jsと後述のswapimage.jsを読み込んでいます。
同じページに複数設置できるようにjsを変更[2017/10/11改定]
キャプション無しの場合は、こちら↓
サムネイル画像をクリックして拡大画像を切り替え表示

JSを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="js/swapimage.js"></script> 

[swapimage.js]JavaScript

// JavaScript Document
$(function() {
    $(".mod_thumlist").each(function() {
        var click_flg = false;
        var photoH = $(this).find(".mod_thumlist_photo_entry img").innerHeight();
        var captionH = $(this).find(".mod_thumlist_photo_entry p").innerHeight();
        $(this).find(".mod_thumlist_photo").css("height", photoH + captionH + "px");
        var linkbtn = $(this).find("ul li a");
        var bigimgwrap = $(this).find(".mod_thumlist_photo");
        $(linkbtn).click(function() {
            if (click_flg == false) {
                click_flg = true;
                $(bigimgwrap).prepend("<div class=\"mod_thumlist_photo_entry\"><img src='" + $(this).attr("href") + "' alt='" + $(this).attr("title") + "'><p>" + $(this).attr("title") + "</p>");
                var removeimg = $(bigimgwrap).find(".mod_thumlist_photo_entry:eq(1)");
                $(removeimg).stop(true, false).fadeOut("fast", function() {
                    $(this).remove();
                    click_flg = false;
                });
                click_flg = false;
                return false;
            } else {
                return false;
            }
        });
    });
});

HTMl

<div class="mod_thumlist">
<ul class="ex_clearfix">
<li><a href="img/image01.jpg" title="オレンジのキャプション"><img src="img/thumbnail01.jpg" width="60" height="60"></a></li>
<li><a href="img/image02.jpg" title="グリーンのキャプション"><img src="img/thumbnail02.jpg" width="60" height="60"></a></li>
<li><a href="img/image03.jpg" title="ピンクのキャプション"><img src="img/thumbnail03.jpg" width="60" height="60"></a></li>
<li><a href="img/image04.jpg" title="ブルーのキャプション"><img src="img/thumbnail04.jpg" width="60" height="60"></a></li>
</ul>

<div class="mod_thumlist_photo">
<div class="mod_thumlist_photo_entry">
<img src="img/image01.jpg" alt="orange" width="700" height="350">
<p>オレンジのキャプション</p>
<!-- / .mod_thumlist_photo_entry --></div>
<!-- / .mod_thumlist_photo --></div>

<!-- / .mod_thumlist --></div>

CSS

/*
-----------------------------------------*/
.mod_thumlist li{
	width:60px;
	height:60px;
	float:left;
	background:none;
	padding:0 10px 0px 0;
	margin:0 0 10px 0;
}
.mod_thumlist li a{
	display:block;
}
.mod_thumlist li a:link    {}
.mod_thumlist li a:visited {}
.mod_thumlist li a:hover   {opacity:0.8;}
.mod_thumlist li a:active  {opacity:0.8;}
/* IE—p «*/
.mod_thumlist li a:hover img {filter:alpha(opacity=80);}

.mod_thumlist_photo{
}
.mod_thumlist_photo_entry{
	position:absolute;
	width:700px;
}