Discuz！图片查看插件（支持鼠标缩放、实际大小、旋转、下载）
图片查看是网站中的常用功能，用于展示详细的图片。在discuz图片插件的基础上进行了改造，因此这篇文章主要从以下几个方面来讨论图片查看插件。希望可以帮助到大家，有不对的地方也欢迎大家给以正确的指导。
（1）discuz的实现过程及效果
（2）discuz的局限性
（3）discuz的改进步骤
（4）兼容性及最后效果
（5）总结（常见问题）
demo示例：http://zyk3.ataw.cn/discuz/index.html
一、discuz的实现过程及效果
点击图片，弹出层有大图，同时有在新窗口打开、显示实际大小、关闭按钮。
效果图如下：
实现代码为：
【html代码】
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>diszuc点击图片放大、拖动、鼠标滚动缩放</title>
<meta name="keywords" content="diszuc点击图片放大、拖动、鼠标滚动缩放" />
<meta name="description" content="diszuc点击图片放大、拖动、鼠标滚动缩放" />
<link rel="stylesheet" type="text/css" href="img/style_1_forum_viewthread.css" />
<script type="text/javascript">
var IMGDIR = 'img/', VERHASH = 'zfhf', JSPATH = 'js/'; //全局设置，必不可少，否则无法正常使用
</script>
<script src="js/common.js" type="text/javascript"></script> //可自行在网上下载 </head>
<body>
<div id="append_parent"></div>
<div id="ajaxwaitid"></div>
<img id="aimg_156139" aid="156139" src="img/none.gif" zoomfile="uploadfiles/100306znrbsxfzuclbplu6.jpg" file="uploadfiles/100306znrbsxfzuclbplu6.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="400" alt="我是一朵花" title="我是一朵花" />
<script src="js/forum_viewthread.js" type="text/javascript"></script>
<script type="text/javascript"> zoomstatus = parseInt(1); var imagemaxwidth = '500'; var aimgcount = new Array(); </script>
<script type="text/javascript" reload="1"> aimgcount[1000] = ['156139','156140','156141']; attachimggroup(1000); attachimgshow(1000); var aimgfid = 0; </script>
</body>
</html>
【css代码】-- style_1_forum_viewthread.css
*{word-wrap:break-word;}body,input,button,select,textarea{font:12px/1.5 Tahoma,'Microsoft Yahei','Simsun';color:#444;}.z{float:left;}.y{float:right;}.hm{text-align:center;} .zoom{cursor:pointer;} .zoominner{ padding:5px 10px 10px; background:#FFF; text-align:left;
} .zoominner p{padding:8px 0;} .zoominner p a{ float:left; margin-left:10px; width:17px; height:17px; background:url(imgzoom_tb.gif) no-repeat 0 0; line-height:100px; overflow:hidden;
} .zoominner p a:hover{background-position:0 -39px;} .zoominner p a.imgadjust{background-position:-40px 0;} .zoominner p a.imgadjust:hover{background-position:-40px -39px;} .zoominner p a.imgclose{background-position:-80px 0;} .zoominner p a.imgclose:hover{background-position:-80px -39px;} .zimg_c{position:relative;} .zimg_prev,.zimg_next{ display:block; position:absolute; width:80px; height:100%; background:url(pic-prev.png) no-repeat 0 -100px; cursor:pointer;
} .zimg_next{ right:10px; background-image:url(pic-next.png); background-position:100% -100px;
} .zimg_c img{margin:0 auto;} .zimg_p strong{display:none;}
【js代码】-- forum_viewthread.js
/* [Discuz!] (C)2001-2099 Comsenz Inc. This is NOT a freeware, use is subject to license terms $Id: forum_viewthread.js 28794 2012-03-13 05:39:46Z zhangguosheng $ */
var replyreload = '', attachimgST = new Array(), zoomgroup = new Array(), zoomgroupinit = new Array(); function attachimggroup(pid) { if(!zoomgroupinit[pid]) { for(i = 0;i < aimgcount[pid].length;i++) { zoomgroup['aimg_' + aimgcount[pid][i]] = pid; } zoomgroupinit[pid] = true; } } function attachimgshow(pid, onlyinpost) { onlyinpost = !onlyinpost ? false : onlyinpost; aimgs = aimgcount[pid]; aimgcomplete = 0; loadingcount = 0; for(i = 0;i < aimgs.length;i++) { obj = $('aimg_' + aimgs[i]); if(!obj) { aimgcomplete++; continue; } if(onlyinpost && obj.getAttribute('inpost') || !onlyinpost) { if(!obj.status) { obj.status = 1; if(obj.getAttribute('file')) obj.src = obj.getAttribute('file'); loadingcount++; } else if(obj.status == 1) { if(obj.complete) { obj.status = 2; } else { loadingcount++; } } else if(obj.status == 2) { aimgcomplete++; if(obj.getAttribute('thumbImg')) { thumbImg(obj); } } if(loadingcount >= 10) { break; } } } if(aimgcomplete < aimgs.length) { setTimeout(function () { attachimgshow(pid, onlyinpost); }, 100); } }
到这里为止，只要以上代码，就可以轻松实现图片随鼠标滚动而自由缩放大小了，是不是很简单呢？
二、discuz的局限性
虽然discuz插件已经基本满足前端技术人员的需求，但在实际项目应用中还存在着一定局限性。比如用的比较多的下载、旋转图片的功能。因此，小菜升级了discuz，新增了下载、旋转图片功能。
三、discuz的改进
想要升级discuz，其实很简单。只要在common_extra.js文件中找到找到menu.innerHTML，并且添加两个a标签，分别设置下载和旋转即可。以下是需要修改的文件及代码：
【js】--common_extra.js
<p class="zoom_text">
<span class="y"><a href="javascript:;" onclick="_ACT_imgupload(this);" class="imgdownload" title="下载"></a><a id="' + menuid + '_imglink" class="imglink" target="_blank" title="新窗口打开"</a><a id="' + menuid + '_adjust" href="javascipt:;" class="imgadjust" title="实际大小"></a>' +'<a href="javascript:;" onclick="_ACT_imgroate(this);" class="imgroate" title="旋转"></a><a href="javascript:;" onclick="hideMenu()" class="imgclose" title="关闭"</a></span></p>
这样就成功添加了下载和旋转按钮。当然要想实现功能，还要另外写事件。其中_ACT_imgupload方法为
window._ACT_imgupload = function (dom) { var _$dom = $(dom); var _$pic = _$dom.parent().parent().parent().find("#imgzoom_zoom"); if (_$pic.length > 0) { window.open(_$pic.attr("src")); } }
_ACT_imgroate方法为
window._ACT_imgroate = function (dom) { var _$dom = $(dom); var _$pic = _$dom.parent().parent().parent().find("#imgzoom_zoom"); if (_$pic.length > 0) { var _ra = _$pic.data("raval"); if (!_ra) _ra = 0; if (_$pic.attr("isleft") != "0") { _$pic.css('rotate', _ra + 90); _$pic.data("raval", _ra + 90); } else { _$pic.css('rotate', _ra - 90); _$pic.data("raval", _ra - 90); } return false; } }
【css】-- style_1_forum_viewthread.css
.zoom_text { position: fixed; bottom: 0; left: 50%; margin-left: -130px; height: 50px; line-height: 60px; padding: 0 50px; background: rgba(0,0,0,.5); border-top-left-radius: 6px; border-top-right-radius: 6px;
} .zoom_text span { display: block; width: 100%; text-align: center;
} .zoom_text a { display: inline-block; margin-left: 10px; width: 22px; height: 22px; line-height: 100px; overflow: hidden;
} .zoom_text a.imglink { background: url(imglink.png);
} .zoom_text a.imgdownload { background: url(imgdownload.png);
} .zoom_text a.imgadjust { background: url(imgadjust.png);
} .imgroate { display: inline-block; width: 17px; height: 17px; margin-left: 10px; background: url(imgroate.png) !important;
} .zoom_text a.imgclose { background: url(imgclose.png);
}
四、兼容性及最后效果
兼容性：
经测试，该插件适用浏览器：IE9及IE9 +、360、Chrome、Firefox、Safari、Opera。
最终效果图：
五、总结
好了，以上就是全部的实现代码，有没有跃跃一试的感觉呢？立马体验一下高大上的图片缩放效果。为了能更好地使用这个插件，另外再分享一下在此过程中遇到的几个问题，希望可以帮助到大家。
【常见问题】
（1）图片不能随鼠标滚动而放大缩小
解决方法：上传的图片大小应控制在宽度width ≠ 600px
（2）在使用下载和旋转功能按钮时，需载入jquery.js和jquery.rotate.js两个文件
（3）载入2上的两个js文件之后，点击图片，无法正常显示，报错信息为"无法获取 obj.getAttribute('file') "，"Cannot read property'parentNode' of undefined"
解决办法：
a.将common.js文件中的
function $(id) { return !id ? null : document.getElementById(id); }
改为
function G_$_D(id) { return !id ? null : document.getElementById(id); }
b.将common_extra.js文件中的"$"改为G_$_D
（4）<head></head>中间必须加 var IMGDIR = 'img/', VERHASH = 'zfhf', JSPATH = 'js/';否则无法生成common_extra.js文件，因而导致页面无法正常显示。如果不想添加这段代码，也可以手动引入common_extra.js