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 ...
随机推荐
- Hive 4、Hive 的安装配置(远端MyMql模式)
1.remote一体 这种存储方式需要在远端服务器运行一个mysql服务器,并且需要在Hive服务器启动meta服务.这里用mysql的测试服务器,ip位192.168.1.214,新建hive_re ...
- 1、什么是Lucene,Lucene能干什么
1.什么是lucene Lucene是一个全文搜索框架,而不是应用产品.因此它并不像http://www.baidu.com/ 或者google Desktop那么拿来就能用,它只是提供了一种工具让 ...
- [转]中英文停止词表(stopword)
停止词,是由英文单词:stopword翻译过来的,原来在英语里面会遇到很多a,the,or等使用频率很多的字或词,常为冠词.介词.副词或连词等.如果搜索引擎要将这些词都索引的话,那么几乎每个网站都会被 ...
- gmapping 学习
为解决斜坡下gmapping定位的问题,开始关注gmapping. 先看到EAIPOT博客里关于gmapping的一个参数文件 <launch> <arg name="sc ...
- TestWriter自动化测试介绍
简介: TestWriter是上海博为峰结合多年为企业做测试服务的经验所研发的一款具有自主知识产权的自动化测试工具,为企业用户提供真正的低成本.高效率的自动化测试,引领软件测试自动化运用由技术层面向业 ...
- Zepto.js touch模块深入分析 解决手机点击事件
源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT li ...
- An Data-Scientist Prepares 《数据科学家的自我修养》
从今天开始,博主将用大概1000天的时间记录自己学习并成为初级数据科学家(数据分析师)的心路历程. 包括数据科学家所必需的的基础知识:数学,统计,计算机,商业,沟通能力等. 希望博主能够在2017前完 ...
- androik_sdk 更新慢问题解决办法。
在windows中更改hosts(找到文件夹C:\Windows\System32\drivers\etc找到里面的hosts文件 )在这里添加74.125.237.1 dl-ssl.google.c ...
- C#6 冒泡 折半查找 二维数组
人类思维--计算机逻辑思维 逻辑思维--代码实现 写书法: 描红--临摹--碑贴--自成一体--草 章节复习: 数组:一维,二维,多维 一维:豆角.连续,同一类型. 定义:数据类型[] 数组名=new ...
- android上传json与服务器交互
http://www.2cto.com/kf/201403/289328.html http://www.tuicool.com/articles/FZJR3eB