Mantis的附件图片实现预览/弹出层动画效果预览图片(LightBox2)的完美解决方案[Z]
方法1:
在Mantis的配置文件中,加入此句,将这个值设的很大,就可以直接看到图片
1 |
$g_preview_attachments_inline_max_size =1000000; |
效果如图
这个方法其实不错,但是有个弊端,小尺寸的图片效果不错,但是大尺寸的图片,可能就还是看不起,还是得下载下来看,
如上图的第三张图片
于是继续探究
方法2:
在Mantis的配置文件config_inc.php加
1 |
$g_form_security_validation = OFF; |
然后在core\file_api.php文件中,修改一段内容
1 |
$t_attachment [ 'download_url' ] = "file_download.php?file_id=$t_id&type=bug&show_inline=1" ; |
此方法实现的效果就是,点击图片附件,将不会下载,而是直接在本页面预览大图片,基本已经很方便实用了
方法3:
这个方法我们引入第三方控件,实现更佳酷炫的图片预览效果
1.下载lightbox2 ,地址http://lokeshdhakar.com/projects/lightbox2/
解压js和css两文件夹(其他不用)到mantis根目录下
2.到core\print_api.php下,找到print_bug_attachments_list 方法,在其内部加上
1 |
echo "<script src=\"js/jquery-1.7.2.min.js\"></script>" ; |
2 |
3 |
echo "<script src=\"js/jquery-ui-1.8.18.custom.min.js\"></script>" ; |
4 |
5 |
echo "<script src=\"js/jquery.smooth-scroll.min.js\"></script>" ; |
6 |
7 |
echo "<script src=\"js/lightbox.js\"></script>" ; |
8 |
9 |
echo "<link rel=\"stylesheet\" href=\"css/lightbox.css\" type=\"text/css\" media=\"screen\" />" ; |
(就是使其倒入刚下载的js与css)
3.继续在到core\print_api.php下,找到if ( $t_attachment['can_download'] ),将第一处的a标签最后,加入rel=”lightbox”或者rel=”lightbox[groupname]“,就是这样
1 |
$t_href_start = '<a href="' . string_attribute( $t_attachment [ 'download_url' ] ) . '" rel="lightbox[group]" >' ; |
4.再修改一下if ( !$t_attachment['exists'] ) 中的部分内容就更完美了
比如注释掉echo $t_href_start;
1 |
//echo $t_href_start; |
再将
1 |
echo $t_href_end . ' ' . $t_href_start . $t_file_display_name . $t_href_end . $t_href_clicket . ' (' . $t_filesize . ' ' . lang_get( 'bytes' ) . ') ' . '<span>' . $t_date_added . '</span>' ; |
改成
1 |
echo $t_file_display_name . $t_href_clicket . ' (' . $t_filesize . ' ' . lang_get( 'bytes' ) . ') ' . '<span>' . $t_date_added . '</span>' ; |
OK,我们一起看一下现在的效果,点击图片
现在就变的很酷炫了哦!还可以直接看下一张图片。赶紧试试吧,
以上3种方法均是独立的,您只要选择一种或二种。推荐1和3配合
Mantis的附件图片实现预览/弹出层动画效果预览图片(LightBox2)的完美解决方案[Z]的更多相关文章
- UIAlertView弹出视图动画效果
在App设计中为了加强用户体验,我们会常常加入一些友好的动画效果.比如类似UIAlertView弹出的动画效果,由于系统中并没有直接提供类似的动画API,如果我们想要做出一样的效果,那就得深入的研究一 ...
- div弹出层的效果带关闭按钮
下面我做的这个是个进度条的弹出层 <style type="text/css"> #tuxiang { width: 57px; } /*div弹出框的css*/ .t ...
- jq原创弹出层折叠效果
弹出层效果很多网站上都用到,今天就整理最近项目里用到的一个小效果,点击折叠弹出一个层给用户填写信息.弹出层代码都是jq动态创建,每个人写法都不一样,需求也不一样,所有选择符合自已的即可. html: ...
- html+javascript实现可拖动可提交的弹出层对话框效果
本文为大家介绍下使用html+javascript实现可拖动弹出层.对话框.可提交,具体代码如下,感兴趣的朋友可以参考下,希望对大家有所帮助 <!DOCTYPE HTML PUBLIC &quo ...
- 窗体 dialog 弹出时动画效果
1.先创建 anim中的 xml 动画文件 <?xml version="1.0" encoding="utf-8"? > <set x ...
- jQuery第三课 点击按钮 弹出层div效果
jQuery 事件方法 事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件. 触发实例: $("button#demo").click() 上面的例子将触发 id= ...
- 微信小程序弹出层动画特效
.rules_modal_cont{ height:800rpx; width:200rpx; -webkit-animation: showZeroAlert .3s; animation: sho ...
- Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 (4)
一.实际项目中有很多如下界面效果. 二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码: <!DOCTYPE html> <html> & ...
- jQuery点击弹出层,弹出模态框,点击模态框消失
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
随机推荐
- linux下如何产生core,调试core
linux下如何产生core,调试core 摘自:http://blog.163.com/redhumor@126/blog/static/19554784201131791239753/ 在程序不寻 ...
- Vim应用
:q!不保存退出 :set number显示行数 :wq保存并退出 ==先输入100,再输入==.从这行开始向下100行,进行自动缩进对齐
- CCTF-PWN1&&PWN3
CCTF-PWN1&&PWN3 PWN1比较有意思,在得到输入的数据后使用shutdown将标准输入,标准输出和标准错误关闭了读写功能的读.也就是不能进行交互了,要保证一次输入就能拿到 ...
- adb server didn t ack failed to start daemon
关掉Ecilpse,打开cmd命令行 1)cd到sdk的platform-tools目录下, 2)执行 adb kill-server ,出现 server not runing 提示 3)执行 ...
- 自定义Dialog,实现由下而上的弹出效果(模仿QQ退出等)
方法: public Dialog createDialog(Context context, View view) { Dialog mSelectPhotoDialog = null; mSele ...
- 前端公共库cdn服务推荐//提高加载速度/节省流量
前端公共库cdn服务推荐,使用可以提高js库加载速度同时也可以节省自己空间的流量,CDN加速公共库虽好,不过一定要使用靠谱的前端cdn服务提供方. 以下整理出比较靠谱的国内cdn加速服务器.排名不分先 ...
- Mongodb常见错误
1. log目录没有创建,而在logpath中有设定 2. SECONDARY默认不可以读取数据,需要db.getMongo().setSlaveOk(); 3. SECONDARY不可以写数据 4. ...
- C++学习之重载运算符1
C++除可重载函数之后,还允许定义已有的运算符,这样通过运算符重载可像处理数据使用它们. 先来个代码 #include<iostream> using namespace std; cla ...
- Flink Program Guide (7) -- 容错 Fault Tolerance(DataStream API编程指导 -- For Java)
false false false false EN-US ZH-CN X-NONE /* Style Definitions */ table.MsoNormalTable {mso-style-n ...
- leetcode 算法刷题(一)
今天开始刷Leetcode上面的算法题.我会更新我刷题过程中提交的代码(成功和不成功的都有)和比较好的解法 第二题 Add Two Numbers 题目的意思:输入两个链表,这两个链表都是倒序的数字, ...