所谓的暗箱,就是点击小图片弹出窗口并显示大图片,类似的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 查看真实效果。