之前為了實現這樣的效果找了很久，大部分都不是自己想要的。

          實現這樣的效果，我用了兩個jquery的框架。一個是 jquery.nailthumb.1.1.js，另一個是jquery.colorbox-min.js。

          大概寫一下用法：

<link href="${pageContext.request.contextPath }/common/jsFramework/nailthumb/jquery.nailthumb.1.1.css" type="text/css" rel="stylesheet" />
	<link rel="stylesheet" href="${pageContext.request.contextPath }/common/jsFramework/colorbox/colorbox.css" />
<script type="text/javascript" src="${pageContext.request.contextPath }/common/js/jquery.min.js"></script>
 

<script src="${pageContext.request.contextPath }/common/jsFramework/nailthumb/jquery.nailthumb.1.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/common/jsFramework/colorbox/jquery.colorbox-min.js"></script>

 這個地方設定縮圖大小

<style type="text/css" media="screen">
    .square-thumb {
        width: 215px;
        height: 240px;
        float:left;
        margin-right:10px;
        margin-bottom:20px;
}
</style>
 

 這是html程式碼,顯示圖片的地方

<div class="square-thumb">
	<a class="keleyi_com" href="${photo.photoPath }"><img src="${photo.photoPath }" width="215px" height="240px"/></a>
</div>

下面JS的第一句話，是建立縮圖

第二句話是設定點選縮圖出現大圖

<script>
     jQuery(document).ready(function() {
         jQuery('.square-thumb').nailthumb();
         $(".keleyi_com").colorbox({ rel: 'group1', transition: "none", innerWidth: '1000px' });
     });
</script>