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 方法,在其内部加上

1echo "<script src=\"js/jquery-1.7.2.min.js\"></script>";
2 
3echo "<script src=\"js/jquery-ui-1.8.18.custom.min.js\"></script>";
4 
5echo "<script src=\"js/jquery.smooth-scroll.min.js\"></script>";
6 
7echo "<script src=\"js/lightbox.js\"></script>";
8 
9echo "<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;

再将

1echo $t_href_end '&#160;' $t_href_start $t_file_display_name $t_href_end$t_href_clicket ' (' $t_filesize ' ' . lang_get( 'bytes' ) . ') ' '<span>' $t_date_added '</span>';

改成

1echo  $t_file_display_name  $t_href_clicket ' (' $t_filesize ' ' . lang_get( 'bytes' ) . ') ' '<span>' $t_date_added '</span>';

OK,我们一起看一下现在的效果,点击图片

现在就变的很酷炫了哦!还可以直接看下一张图片。赶紧试试吧,

以上3种方法均是独立的,您只要选择一种或二种。推荐1和3配合

转载自Chengaomin's Blog

转载于:https://www.cnblogs.com/huak/p/3860604.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Lightbox 2插件介绍: Lightbox 2 是一款很酷的图片显示插件,可以在一个平滑展开的新窗口中展现出图片,而同时页面的其余部分都变成黑色背景。使用这 款插件,是为了当你的的图片过大必须缩小到页面的宽度时,可以让读者在当前页面浏览完整大小的图片,而不用离开。并且这款插件支持所有主流的浏览器。 Lightbox 2插件安装: 下载Lightbox 2 插件,然后上传插件到/wp-content/plugins/下的文件夹。 到WordPress 管理后台插件页面激活插件,激活后插件后, 到 WordPress 后台的 "Settings -> Lightbox",进入设置页面,如下图: .在这个页面里,你可以设置展示图片时的背景色、插件生效的页面等信息,其实,这里不需要进行任何设置,根据个人喜好,你可以对这些信息进行设置。 插件的相关选项设置好了后,现在就可以对这个插件进行应用了,使用它时,有两种方法添加代码: 1.可视化添加(在可视化编辑器下) 具体步骤:插入图片–编辑图片–高级设置–(下拉)高级链接设置–在链接Rel输入”lightbox”/”lightbox[1]“ ,如下图: 2.代码添加(需进入代码编辑区) 在添加完图片链接后,进入代码编辑区,在图片代码处添加 rel=”lightbox” ,即 如果想要弄个图片组,让它显示出翻页效果,那么把 rel=”lightbox” 改成 rel=”lightbox[X]“,X为你对这个相册的命名(可任意,只要图片组中插入的图片代码相同即可): 添加好代码后,这个炫酷的插件,基本上就OK了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值