サムネイルの画像をクリックで拡大・切り替え・表示します！

デモページへopen_in_new

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="gallery.js"></script> 

[gallery.js]JavaScript

// JavaScript Document
$(window).on('load resize', function() {
    //写真の高さ取得
    var photoH = $("#photo>img").innerHeight();
    $("#photo").css("height", photoH + "px");
});
$(function() {
    var click_flg = false;
    $("#navi a").click(function() {
        if (click_flg == false) {
            click_flg = true;
            $("#photo img").before("<img class='demo' src='" + $(this).attr("href") + "' alt=''>");
            $("#photo img:last").stop(true, false).fadeOut("fast", function() {
                $(this).remove();
                click_flg = false;
            });
            return false;
        } else {
            return false;
        }
    });
});


//1ページに複数の場合
$(window).on('load resize', function() {
    $(".mod_gallery").each(function() {
        //写真の高さ取得
        var photoH = $(this).find(".mod_gallery_photo>img").innerHeight();
        $(this).find(".mod_gallery_photo").css("height", photoH + "px");
    });
    $(function() {
        var click_flg = false;
        $(".mod_gallery_navi a").click(function() {
            if (click_flg == false) {
                click_flg = true;
                var classname = $(this).attr("class");
                $("div." + classname + " img").before("<img class='demo' src='" + $(this).attr("href") + "' alt=''>");
                $("div." + classname + " img:last").stop(true, false).fadeOut("fast", function() {
                    $(this).remove();
                    click_flg = false;
                });
                return false;
            } else {
                return false;
            }
        });
    });
});

HTMl

<div id="navi">
<ul class="ex_clearfix">
<li><a href="img/image01.jpg"><img src="img/thumbnail01.jpg" width="60" height="60"></a></li>
<li><a href="img/image02.jpg"><img src="img/thumbnail02.jpg" width="60" height="60"></a></li>
<li><a href="img/image03.jpg"><img src="img/thumbnail03.jpg" width="60" height="60"></a></li>
<li><a href="img/image04.jpg"><img src="img/thumbnail04.jpg" width="60" height="60"></a></li>
</ul>
<!-- navi_end --></div>

<div id="photo">
<img src="img/image01.jpg" alt="orange" width="700" height="350">
<!-- photo_end --></div>

<!-- 1ページに複数の場合はコチラ↓class指定 -->
<div class="mod_gallery">
<div class="mod_gallery_navi">
<ul class="ex_clearfix">
<li><a class="gallery01" href="img/image01.jpg"><img src="img/thumbnail01.jpg" width="60" height="60"></a></li>
<li><a class="gallery01" href="img/image02.jpg"><img src="img/thumbnail02.jpg" width="60" height="60"></a></li>
<li><a class="gallery01" href="img/image03.jpg"><img src="img/thumbnail03.jpg" width="60" height="60"></a></li>
<li><a class="gallery01" href="img/image04.jpg"><img src="img/thumbnail04.jpg" width="60" height="60"></a></li>
</ul>
<!-- mod_gallery_navi_end --></div>
<div class="mod_gallery_photo gallery01">
<img src="img/image01.jpg" alt="orange" width="700" height="350">
<!-- mod_gallery_photo_end --></div>
<!--mod_gallery_end--></div>

CSS

#navi li{
	width:60px;
	height:60px;
	float:left;
	background:none;
	padding:0 10px 0px 0;
	margin:0 0 10px 0;
}
#navi li a{
	display:block;
}
#navi li a:link    {}
#navi li a:visited {}
#navi li a:hover   {opacity:0.8;}
#navi li a:active  {opacity:0.8;}
/* IE用 ↓*/
#navi li a:hover img {filter:alpha(opacity=80);}

#photo{
	margin:20px 0 0 0;
}
#photo img{
 position:absolute;
 width:100%;
 height:auto;
 max-width:700px;
}

/* mod_gallery(複数設置の場合)
-----------------------------------------*/
.mod_gallery{
 margin:20px 0 20px 0;
}
/* .mod_gallery_navi */
.mod_gallery_navi li{
	width:60px;
	height:60px;
	float:left;
	background:none;
	padding:0 10px 0px 0;
	margin:0 0 10px 0;
}
.mod_gallery_navi li a{
	display:block;
}
.mod_gallery_navi li a:link    {}
.mod_gallery_navi li a:visited {}
.mod_gallery_navi li a:hover   {opacity:0.8;}
.mod_gallery_navili a:active  {opacity:0.8;}
/* IE用 ↓*/
.mod_gallery_navi li a:hover img {filter:alpha(opacity=80);}

/* mod_gallery_photo */
.mod_gallery_photo{
	margin:20px 0 0 0;
}
.mod_gallery_photo img{
 position:absolute;
 width:100%;
 height:auto;
 max-width:700px;
}