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

Discuz！图片查看插件（支持鼠标缩放、实际大小、旋转、下载）的更多相关文章

  1. jquery图片查看插件，支持旋转、放大、缩小、拖拽、缩略图（仿qq图片查看）

    最近做了一个jquery图片查看的插件,目的是能精确查看图片的详情,插件支持图片旋转.放大.缩小.拖拽.缩略图显示,界面效果是按照window的qq查看图片功能写的,当然不尽相同. 具体功能: 1. ...

  2. jQuery 图片查看插件 Magnify 开发简介（仿 Windows 照片查看器）

    前言 因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功能,比如模态窗的拖拽.调整大小.最大化, ...

  3. 基于JQUERY 的图片查看插件

    viewer是一款功能强大的图片查看器.它可以实现ACDsee等看图软件的部分功能.它可以对图片进行移动,缩放,旋转,翻转,可以前后浏览一组图片.该图片查看器还支持移动设备,支持键盘控制,功能十分强大 ...

  4. 基于vue的图片查看插件vue-photo-preview

    1. 安装 在任务管理器中输入命令 2. 在项目main.js中引入 3.在所需要的项目中直接使用 还有两个属性,可以看需求添加 preview-title-enable="false&qu ...

  5. jQuery垂直缩略图相册插件 支持鼠标滑动翻页

    在线演示 本地下载

  6. 【Winform-自定义控件】ImageButton 支持鼠标正常、悬停、按下更改图片，支持文本

    原文地址:https://www.codeproject.com/Articles/29010/WinForm-ImageButton 自定义winfrom图片按钮:支持鼠标正常.悬停.按下更改图片, ...

  7. VS+Qt+Halcon——显示图片，实现鼠标缩放、移动图片

    摘要 本篇博文记录一下,用VS+Qt+Halcon实现对图片的读取以及鼠标缩放,移动(鼠标事件调用了halcon自带的算子)的过程.以及遇到的坑..... 先来看一下动态效果图: 主要控件: 添加一个 ...

  8. 20+功能强大的jQuery/CSS3图片特效插件

    以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3. 1.jQuery图片下滑切换播放效果 这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有 ...

  9. 使用iScroll和photoswipe写手机浏览图片的插件的几点经验

    首先,当我知道我得到一个任务需要写一个在手机上能浏览图片的插件时,我第一想到了iScroll.它的左右滑动,上下滑动的效果在安卓手机上也能让用户有良好的体验,自己写也能方便控制. 我的需求是,插件要能 ...

随机推荐

  1. window8家庭版上的RationalRose

    来点儿小插曲儿,本是继续Java系列文章的续集的,但是最近要用到UML,在网上看了看,查了查推荐的到是不少,最终还是选择了rose,哈哈,一半是冲着名字去的,一半看看了与其它的UML的比较,最终中意r ...

  2. Ucenter后台登陆 验证码CCCC的解决方法 无法登录解决办法

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html 内部邀请码:C8E245J (不写邀请码,没有现金送) 国 ...

  3. Java常见排序算法之直接选择排序

    在学习算法的过程中,我们难免会接触很多和排序相关的算法.总而言之,对于任何编程人员来说,基本的排序算法是必须要掌握的. 从今天开始,我们将要进行基本的排序算法的讲解.Are you ready?Let ...

  4. C# DataGridView中合并单元格

    /// 合并GridView列中相同的行 /// /// GridView对象 /// 需要合并的列 public static void GroupRows(GridView GridView1, ...

  5. Codeforces Round #312 (Div. 2) C. Amr and Chemistry 暴力

    C. Amr and Chemistry Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/558/ ...

  6. Codeforces Round #188 (Div. 2) A. Even Odds 水题

    A. Even Odds Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/318/problem/ ...

  7. Handler具体解释

    首先下载Android api 进行查阅 ,API下载地址:http://pan.baidu.com/s/1i33dTGT 以下的描写叙述假设那里错了,请大家吐槽,我也是第一次学习,共同进步 Hand ...

  8. 2013 French Open Semifinal Press

    http://v.youku.com/v_show/id_XNTY4MTgzOTEy.html?firsttime=0 Novak, can you take any confirt   for qu ...

  9. POJ 2309 BST 树状数组基本操作

    Description Consider an infinite full binary search tree (see the figure below), the numbers in the ...

  10. Android平台上长连接的实现

    Android 平台上长连接的实现 为了不让 NAT 表失效,我们需要定时的发心跳,以刷新 NAT 表项,避免被淘汰. Android 上定时运行任务常用的方法有2种,一种方法用 Timer,另一种是 ...