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. JPA一对多和多对一关系

    1-m:多的一方为关系维护端,关系维护端负责外键纪录的更新,关系被维护端没有权力更新外键纪录. 维护端注解 @OneToMany(cascade = { CascadeType.PERSIST, Ca ...

  2. Libvirt 虚拟化库剖析

    讲到向外扩展计算(比如云计算),libvirt 可能是您从未听说过的最重要的库之一.libvirt 提供一种虚拟机监控程序不可知的 API 来安全管理运行于主机上的来宾操作系统.libvirt 本身不 ...

  3. JS函数的定义与调用方法

    JS函数调用的四种方法:方法调用模式,函数调用模式,构造器调用模式,apply,call调用模式 1.方法调用模式:先定义一个对象,然后在对象的属性中定义方法,通过myobject.property来 ...

  4. Cortex-M3 Context Switching

    http://www.embedded.com/design/embedded/4231326/Taking-advantage-of-the-Cortex-M3-s-pre-emptive-cont ...

  5. cocos2d jsb 打包 Android APK

    1.首先要会普通的cpp 打包成Android APK 下面所说的是在cocos2d-x 2.2.2 或者 2.3 版本号中.本文在Eclipse总用ndk编译cocos2d-x. 老生常谈cocos ...

  6. jquery禁用右键、文本选择功能、复制按键的实现

    同时适合IE.firefox.谷歌浏览器下适用,经过筛选代码如下 //禁用右键.文本选择功能.复制按键 $(document).bind(“contextmenu”,function(){return ...

  7. TXT EXPLORER

    EXE程序:http://files.cnblogs.com/xe2011/RELEASE_TXTExplorer2014-08-25-165323.rar c# 源码:http://files.cn ...

  8. mvc cookie

    Response.Cookies["userName"].Value = "ddd"; <%     if (Request.Cookies[" ...

  9. android手势事件 快速移动 长按触摸屏 按下触摸屏，并拖动

    /* 用户按下触摸屏.快速移动后松开 public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float vel ...

  10. qt creator中使用qwt插件

    前提:我用mingw编译的qwt. 将qwt插件集成到qt designer非常easy.仅仅要把qwt编译的qwt_designer_plugin.dll复制到C:\Qt\Qt5.3.1\5.3\m ...