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