点击图片缩略图放大展示效果的实现
最近实现的easyUI查询数据列表中有展示图片的功能，为了能更好方便用户查看图片缩略图的内容，增加了点击图片放大的效果，下边是实现后的效果以及实现方法
点击放大的效果
三个顺序图片可一一展示
实现方法：
1、引入第三方的js文件和css样式文件
<!-- 放大图片 --><link rel="stylesheet" href="<%=path%>/js/bigimage/css/bigimage.css" type="text/css" /><script type="text/javascript" src="<%=path%>/js/bigimage/js/content_zoom.js"></script><!-- 放大图片 -->
2、easyUI加载数据的js方法中处理针对图片的展示
{field : 'row.img_path',title : '相关截图',width : 50,align : 'center',formatter:function(value,row,index){if(row.img_path!=null&&row.img_path!=''){var img = row.img_path.split(",");var html = "";var bigH = "";html += "<div class='small_pic'>";$(img).each(function(i){html += "<a href='#pic_"+row.id+"_"+i+"'>";html += "<img src='<%=uploadPath%>upload/correction/"+img[i]+"' width:50 height=50>";html += "</a>";bigH += "<div id='pic_"+row.id+"_"+i+"' style='display:none;'><img style='max-width:92%;max-height:720px; width:320px;' src='<%=uploadPath%>upload/correction/"+img[i]+"'/></div>";});html += "</div>";html += bigH;return html;}}},
该方法中img标签中的uploadPath是设定的服务器地址
String uploadPath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()+"/";
从row当中获取的img_path可能存在多个图片，以“，”分隔，分别取出img中各个图片进行处理，<a>标签中是缩略图原型，在bigH则是放大后的图片，放大后的图片默认是隐藏的；
在此处处理完成后，需要用到第三方插件的地方在，easyUI调用loadTable完成后，对图片添加操作的
onLoadSuccess:function(data){$('div.small_pic a').fancyZoom({scaleImg: true, closeOnClick: true});}
此处对缩略图的<a>标签做处理，点击放大，再次点击恢复。
