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. Firefox 32 支持 Public Key Pinning 对抗中间人攻击。

    Firefox 32 支持 Public Key Pinning 对抗中间人攻击.8月28日消息,即将发布的Firefox 32将支持Public Key Pinning机制,以防止中间人攻击.Pub ...

  2. IE6下z-index失效

    一.匆匆带过的概念关于CSS中层级z-index的定义啊什么的不是本文的重点,不会花费过多篇幅详细讲述.这里就简单带过,z-index伴随着层的概念产生的.网页 中,层的概念与photoshop或是f ...

  3. RDD的依赖关系

    RDD的依赖关系 Rdd之间的依赖关系通过rdd中的getDependencies来进行表示, 在提交job后,会通过在DAGShuduler.submitStage-->getMissingP ...

  4. 【转】工科男IT职场求生法则

    转自:http://www.36dsj.com/archives/3459 我在IT职场打滚超过10年了,从小小的程序员做到常务副总.相对于其它行业,IT职场应该算比较光明的了,但也陷阱重重,本文说说 ...

  5. C++ Primer 学习笔记_46_STL实践与分析（20）--容器特有的算法

    STL实践与分析 --容器特有的算法 与其它顺序容器所支持的操作相比,标准库为list容器定义了更精细的操作集合,使它不必仅仅依赖于泛型操作.当中非常大的一个原因就是list容器不是依照内存中的顺序进 ...

  6. 如何用C#语言构造蜘蛛程序

    "蜘蛛"(Spider)是Internet上一种很有用的程序,搜索引擎利用蜘蛛程序将Web页面收集到数据库,企业利用蜘蛛程序监视竞争对手的网站并跟踪变动,个人用户用蜘蛛程序下载We ...

  7. 网易新闻优化APK下载链接

    你好,欢迎你的访问! 本次是APK包的下载链接: 点我下载 这是我目前实现的效果,正在完善中...

  8. HDU 1504 Disk Tree

    转载请注明出处:http://blog.csdn.net/a1dark 分析:查了一下这题.发现网上没有什么关于这道题的解题报告.其实题目意思挺好懂的.就是给你一些文件的目录结构.然后让你把它们组合在 ...

  9. Eclipse快捷键 10个最有用的快捷键【转】

    Eclipse中10个最有用的快捷键组合  一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的浏览源代码,使得整体的开发效率和质量得到提升.    ...

  10. 学了这四招，你在Linux上观看Netflix视频不发愁

    导读 一份崭新的Linux发行版已经安装到你的电脑上,你完全准备好使用免费开源办公软件处理长时间的工作.但是你可能会问自己:"难道除了工作,就没有乐趣可言?我就是想观看Netflix视频!& ...