Discuz！图片查看插件（支持鼠标缩放、实际大小、旋转、下载）

Discuz！图片查看插件（支持鼠标缩放、实际大小、旋转、下载）

　　图片查看是网站中的常用功能，用于展示详细的图片。在discuz图片插件的基础上进行了改造，因此这篇文章主要从以下几个方面来讨论图片查看插件。希望可以帮助到大家，有不对的地方也欢迎大家给以正确的指导。

　（1）discuz的实现过程及效果

　（2）discuz的局限性

（3）discuz的改进步骤

（4）兼容性及最后效果

（5）总结（常见问题）

demo示例：http://zyk3.ataw.cn/discuz/index.html

一、discuz的实现过程及效果

点击图片，弹出层有大图，同时有在新窗口打开、显示实际大小、关闭按钮。

效果图如下：

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。

最终效果图：

Discuz！图片查看插件（支持鼠标缩放、实际大小、旋转、下载）

五、总结

　　好了，以上就是全部的实现代码，有没有跃跃一试的感觉呢？立马体验一下高大上的图片缩放效果。为了能更好地使用这个插件，另外再分享一下在此过程中遇到的几个问题，希望可以帮助到大家。

【常见问题】

（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！图片查看插件（支持鼠标缩放、实际大小、旋转、下载）的更多相关文章

jquery图片查看插件，支持旋转、放大、缩小、拖拽、缩略图（仿qq图片查看）
最近做了一个jquery图片查看的插件,目的是能精确查看图片的详情,插件支持图片旋转.放大.缩小.拖拽.缩略图显示,界面效果是按照window的qq查看图片功能写的,当然不尽相同. 具体功能: 1. ...
jQuery 图片查看插件 Magnify 开发简介（仿 Windows 照片查看器）
前言因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功能,比如模态窗的拖拽.调整大小.最大化, ...
基于JQUERY 的图片查看插件
viewer是一款功能强大的图片查看器.它可以实现ACDsee等看图软件的部分功能.它可以对图片进行移动,缩放,旋转,翻转,可以前后浏览一组图片.该图片查看器还支持移动设备,支持键盘控制,功能十分强大 ...
基于vue的图片查看插件vue-photo-preview
1. 安装在任务管理器中输入命令 2. 在项目main.js中引入 3.在所需要的项目中直接使用还有两个属性,可以看需求添加 preview-title-enable="false&qu ...
jQuery垂直缩略图相册插件支持鼠标滑动翻页
在线演示本地下载
【Winform-自定义控件】ImageButton 支持鼠标正常、悬停、按下更改图片，支持文本
原文地址:https://www.codeproject.com/Articles/29010/WinForm-ImageButton 自定义winfrom图片按钮:支持鼠标正常.悬停.按下更改图片, ...
VS+Qt+Halcon——显示图片，实现鼠标缩放、移动图片
摘要本篇博文记录一下,用VS+Qt+Halcon实现对图片的读取以及鼠标缩放,移动(鼠标事件调用了halcon自带的算子)的过程.以及遇到的坑..... 先来看一下动态效果图: 主要控件: 添加一个 ...
20+功能强大的jQuery/CSS3图片特效插件
以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3. 1.jQuery图片下滑切换播放效果这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有 ...
使用iScroll和photoswipe写手机浏览图片的插件的几点经验
首先,当我知道我得到一个任务需要写一个在手机上能浏览图片的插件时,我第一想到了iScroll.它的左右滑动,上下滑动的效果在安卓手机上也能让用户有良好的体验,自己写也能方便控制. 我的需求是,插件要能 ...

随机推荐

jQuery&period;ajax(url,[settings])
概述通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象. ...
C&num;怎样通过url调用接口
在做一些项目过程中,我们常常总避免不了要调用接口,那么怎么通过url调用借口呢.我今天浅显的写一下. 首先要获取你访问链接的App Key 和 App Secret 那么什么是App Key 和 Ap ...
iOS摄像头和相册-UIImagePickerController常用操作
在一些应用中,我们需要用到iOS设备的摄像头进行拍照,视频.并且从相册中选取我们需要的图片或者视频. 关于iOS摄像头和相册的应用,可以使用UIImagePickerController类来完成控制. ...
Hibernate与MyBatis区别
Hibernate是当前主流的ORM框架,对数据库结构提供了较为完整的封装. MyBatis同样也是非常流行的ORM框架,主要在于pojo与SQL之间的映射关系. 区别: 1.两者最大的区别针对简单 ...
Zabbix探索：模板中发现规则的使用
其实模板的建立只要多看看系统自带的模板内容就清楚了,一目了然,不用做过多解释. 目前使用到的自动发现规则有端口和文件系统的,其他还没有仔细研究. 下面说说遇到的几个问题. 1.Key不能相同.普通项目 ...
perl post 请求相关参数
$ua->post( $url, \%form ) $ua->post( $url, \@form ) $ua->post( $url, \%form, $field_name =& ...
Java字节流和字符流
file.txt文本中存储的内容: 好abc 1.字符流处理: package com.wjy.java; import java.io.FileInputStream; import java.io ...
Javascript Object&period;defineProperty()
转载声明: 本文标题:Javascript Object.defineProperty() 本文链接:http://www.zuojj.com/archives/994.html,转载请注明转自Ben ...
C&num;backgroundWorker
private void button1_Click(object sender, EventArgs e) { backgroundWorker1.RunWorkerAsync(); } priva ...
Linux系统VPS主机SSH常用命令
putty查询log文当里的"test"关键字 /home/iotserver/WebServer3_log# grep "test" log.log.bak2 ...