为Wordpress主题添加图片暗箱特效
来源:互联网 发布:java浮点数精度丢失 编辑:程序博客网 时间:2024/04/28 15:30
所谓的暗箱,就是点击小图片弹出窗口并显示大图片,类似的Wordpress插件众多,比如:wp-slimbox2、jQuery Lightbox、jQuery Colorbox、Gameplorer`s WPColorBox、shadowbox-js、Auto Highslide等等,功能效果都相似。其实不用插件简单几步就可将这一特效集成到WordPress主题中,而且加载的文件也比插件小的多。喜欢折腾的童鞋可以参照下面的方法操作:
首先,下载所需文件,解压后将pirobox文件夹内的所有文件放到你所使用主题的目录中。
其次,打开主题header模版文件,在</head>前面,分别添加:
所需样式:
1.
<link rel=
"stylesheet"
href=
"<?php bloginfo('template_url'); ?>/img/style.css"
/>
必须的jquery.min.js及特效pirobox.min.js文件:
01.
<script type=
"text/javascript"
src=
"<?php bloginfo('stylesheet_directory'); ?>/js/jquery.min.js"
></script>
02.
<script type=
"text/javascript"
src=
"<?php bloginfo('template_directory'); ?>/js/pirobox.min.js"
></script>
03.
<script type=
"text/javascript"
>
04.
$(document).ready(
function
() {
05.
$().piroBox({
06.
my_speed: 400,
//animation speed
07.
bg_alpha: 0.3,
//background opacity
08.
slideShow : true,
// true == slideshow on, false == slideshow off
09.
slideSpeed : 4,
//slideshow duration in seconds(3 to 6 Recommended)
10.
close_all :
'.piro_close,.piro_overlay'
// add class .piro_overlay(with comma)if you want overlay click close piroBox
11.
});
12.
});
13.
</script>
如果你所使用的主题已加载了jquery.js,可以免去jquery.min.js文件加载代码。
最后,集成该特效除了加载必须的JS和样式文件,关键是为日志中的图片链接自动添加JS特效所需的固定标签属性(class="pirobox_gall")。将下面代码扔到主题functions.php中
1.
add_filter(
'the_content'
,
'pirobox_gall_replace'
);
2.
function
pirobox_gall_replace (
$content
)
3.
{
global
$post
;
4.
$pattern
=
"/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i"
;
5.
$replacement
=
'<a$1href=$2$3.$4$5 class="pirobox_gall"$6>$7</a>'
;
6.
$content
= preg_replace(
$pattern
,
$replacement
,
$content
);
7.
return
$content
;
8.
}
完成暗箱特效集成,简单吧。之后,点击日志中的图片,就会华丽地弹出窗口展示该日志中所有插入的图片,可手动播放也可以自动播放。下面的演示是通过shadowbox-js插件实现的,真正集成后的效果要比这个炫。或者到我的站:http://zmingcx.com/gallery/enjoy 查看真实效果。
无图像只有图片链接一样会显示特效点(击链接查看效果)
- 为Wordpress主题添加图片暗箱特效
- 为WordPress博客图片添加水印
- 为非官方WordPress主题添加在线升级更新功能
- WordPress 为分类添加图片的插件:Categories Images
- 如何为自制的Wordpress主题/插件的设置后台添加ajax支持
- 给WordPress非官方主题添加备案号
- 为WordPress站点添加论坛
- 为wordpress添加留言板 dmsguestbook
- java为文字添加特效
- WordPress图片主题大气简洁的图片展示rellex
- 如何给WordPress主题添加自定义头部图像
- wordpress知更鸟begin主题添加菜单字体图标
- wordpress 替换国外主题字体为微软雅黑
- wordpress解决主题中路径的问题(图片,css)
- WordPress主题设计技巧:调用文章第一张图片方法
- 为WordPress编辑器添加WP-Syntax按钮
- 为WORDPRESS博客添加邮件订阅功能
- 为WordPress添加代码高亮插件
- C语言笔试题(17)——三种常见的排序
- SQLite学习笔记(4)
- 程序员如何承接软件外包项目
- 一道表达式的经典试题
- 算法学习之数据结构之单链表反转,两两反转
- 为Wordpress主题添加图片暗箱特效
- 路上看水
- android面试总结加强再加强版
- Django框架学习-Model进阶用法
- Windows get into remote Ubuntu desktop based on FreeNX
- 树状数组(Binary Indexed Tree)
- 邂逅-------秋天的童话
- busybox里的僵尸进程为何那么多
- 浙大ACM 2075 Ellipsoid Volume解题报告