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 ...
随机推荐
- .NET与你若仅仅如初见(一)
难忘初次见到你,那是一个夏日的午后,可是天空中乌云密布.大雨来临前的一段时间总是非常闷热的,当我朦胧的睡眼看到你之后瞬间就清醒了,感觉空气也凉爽了起来.尽管仅仅一眼但就是被你那清新脱俗沉鱼落雁之美所征 ...
- MySQL Server 5.0 下载与 安装指南[图文] (安装到非系统路径+设置root账号相应password)
软件下载:点我前往下载 安装需知:相应mysql版本号为V5.0 ------------------------------------------------- 安装步骤例如以下: Step1 首 ...
- 卓尼斯ZT-180评測
卓尼斯ZT-180评測 ——正在出差途中,用10”上网本发帖,没有拍照,且写得冲忙,不妥之处见谅. 一.採购 1.因外出旅游,不想带那台14"笔记本,所以想买一台平板电脑.当时,选择的 ...
- win7下安装Ubuntukylin-14.04双系统
工具准备: 下载ISO系统镜像,UltraISO,EasyBCD,分区助手,8G 优盘 U盘启动制作流程: 1,打开分区助手,从硬盘中分出空闲空间(60G)作为Ubuntu工作空间,文件系统设为Ext ...
- 【最小费用最大流】【HDU1533】【Going Home】
题意 给你一个类似这样的图 ...H.... ...H.... ...H.... mmmHmmmm ...H.... ...H.... ...H.... 问所有H移动到所有m上花费最少的步数 以所有H ...
- Javascript 【JSON对象】
var box = JSON.parse(json); //将字符串解析为JSON var json = JSON.stringify(box); //讲JSON转换为字符串 var b ...
- ora-00600笔记
一. ORA-600 概述 Errorsof the form ORA-600 are called internal errors. This section clarifies themisund ...
- Unicode解码、URL编码/解码
+ (NSString *) stringByReplaceUnicode:(NSString *)string { NSMutableString *convertedString = [strin ...
- 20160126--springaop
package com.hanqi; public interface IJiSuanQi { public int jia(int a , int b); public int jian(int a ...
- MapReduce详解
1.mapreduce之shuffle http://blog.csdn.net/thomas0yang/article/details/8562910 2.彻底了解mapreduce核心Shuffl ...