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>