jquery特效---jquery顯示縮略圖，點擊查看大圖，並且大圖可自適應原圖大小

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

          實現這樣的效果，我用了兩個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>