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:;
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