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. vimrc常用配置项

    设置行号 set nu 设置自动缩进 set autoindent 设置tab占n个字符 set tabstop=n 设置以空格代替tab(因为有部分场合不允许使用tab) set expandtab ...

  2. [CentOS]yum安装postgres和ntfs-3g

    卸载已经存在的postgreSql yum list | grep postgresyum remove postgresql-server 获取rpm文件并安装rpm -i http://yum.p ...

  3. 保持长宽比 对背景图像进行修改android:scaleType="fitXY"

    关于android中ImageView的外观,即图片在其内显示出的样子,与布局文件中adjustViewBonds和scaleType属性的关系.我进行了一些探索.现跟大家共享,欢迎各位指教.分别将a ...

  4. 微信公共服务平台开发（.Net 的实现）8-------处理图片(上传下载发送)

    举个例子,有人对着我们的公共微信号拍个照片发送过来,然后我们处理这个照片,比如进行ocr识别字(随后就会降到这个例子),或者人脸识别,或者拍照取证等,这些功能都是相当有用的.那么我们现在就要分析一下这 ...

  5. [CSS] Introduction to CSS Columns

    Learn how to use CSS columns to quickly lay out fluid columns that are responsive, degrade gracefull ...

  6. HDU 4876 ZCC loves cards（暴力剪枝)

    HDU 4876 ZCC loves cards 题目链接 题意:给定一些卡片,每一个卡片上有数字,如今选k个卡片,绕成一个环,每次能够再这个环上连续选1 - k张卡片,得到他们的异或和的数,给定一个 ...

  7. SQLServer恢复表级数据

    最近几天,公司的技术维护人员频繁让我恢复数据库,因为他们总是少了where条件,导致update.delete出现了无法恢复的后果,加上那些库都是几十G.恢复起来少说也要十几分钟.为此,找了一些资料和 ...

  8. AssetsManager下载类

    cocos2dx-2.1.3 2dx自己代的例子进行讲解 360   cocos2dx net  --> 2.1.3AssetsManager AppDelegate.cpp详解 1.创建目录 ...

  9. MySQL 5.7 深度解析: JSON数据类型使用

    http://www.actionsky.com/docs/archives/156  2015年12月25日  杨涛涛 JSON (JavaScriptObject Notation) 是一种轻量级 ...

  10. linux php安装扩展方法 查找配置文件

    如何在linux中查看nginx.apache.php.mysql配置文件路径了,如果你接收一个别人配置过的环境,但没留下相关文档.这时该怎么判断找到正确的加载文件路径了.可以通过以下来判断 1.判断 ...