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>