WordPress免插件实现FancyBox效果

2011-02-07

808

今天把fancybox-for-wordpress这个插件集成到wordpress里面来了，感觉效果不错，比lightbox好些。下面就说说详细的过程吧。

如果你嫌麻烦可以到wordpress官网下载fancybox-for-wordpress这个插件，不过是英文的，没有中文语言包。
下面就说如何集成到wordpress里面：

第一步：下载经过压缩的js代码，原来是15kb的大小，经过压缩11.4kb。并放在当前主题js目录下（你也可以自己修改），备用地址：MEGA。

第二步：下载CSS所需调用的图片，并将photo目录放在当前主题images目录里面，备用地址：MEGA。

第三步：将以下代码放在头部header.php ，即为加载JS代码。

第四步：在当前主题样式表中加入以下css代码。

/* * FancyBox - jQuery Plugin Revise by onedou*/
#fancybox-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	margin-left: -20px;
	cursor: pointer;
	overflow: hidden;
	z-index: 1104;
	display: none;
}
#fancybox-loading div {
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 480px;
	background-image: url('images/photo/fancybox.png');
}
#fancybox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1100;
	display: none;
}
#fancybox-tmp {
	padding: 0;
	margin: 0;
	border: 0;
	overflow: auto;
	display: none;
}
#fancybox-wrap {
	position: absolute;
	top: 0;
	left: 0;
	padding: 20px;
	z-index: 1101;
	outline: none;
	display: none;
}
#fancybox-outer {
	position: relative;
	width: 100%;
	height: 100%;
	background: #fff;
}
#fancybox-content {
	width: 0;
	height: 0;
	padding: 0;
	outline: none;
	position: relative;
	overflow: hidden;
	z-index: 1102;
	border: 0px solid #fff;
}
#fancybox-hide-sel-frame {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	z-index: 1101;
}
#fancybox-close {
	position: absolute;
	top: -15px;
	right: -15px;
	width: 30px;
	height: 30px;
	background: transparent url('images/photo/fancybox.png') -40px 0px;
	cursor: pointer;
	z-index: 1103;
	display: none;
}
#fancybox-error {
	color: #444;
	font: normal 12px/20px Arial;
	padding: 14px;
	margin: 0;
}
#fancybox-img {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: none;
	outline: none;
	line-height: 0;
	vertical-align: top;
}
#fancybox-frame {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}
#fancybox-left, #fancybox-right {
	position: absolute;
	bottom: 0px;
	height: 100%;
	width: 35%;
	cursor: pointer;
	outline: none;
	background: transparent url('images/photo/blank.gif');
	z-index: 1102;
	display: none;
}
#fancybox-left {
	left: 0px;
}
#fancybox-right {
	right: 0px;
}
#fancybox-left-ico, #fancybox-right-ico {
	position: absolute;
	top: 50%;
	left: -9999px;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	cursor: pointer;
	z-index: 1102;
	display: block;
}
#fancybox-left-ico {
	background-image: url('images/photo/fancybox.png');
	background-position: -40px -30px;
}
#fancybox-right-ico {
	background-image: url('images/photo/fancybox.png');
	background-position: -40px -60px;
}
#fancybox-left:hover, #fancybox-right:hover {
	visibility: visible; /* IE6 */
}
#fancybox-left:hover span {
	left: 20px;
}
#fancybox-right:hover span {
	left: auto;
	right: 20px;
}
.fancybox-bg {
	position: absolute;
	padding: 0;
	margin: 0;
	border: 0;
	width: 20px;
	height: 20px;
	z-index: 1001;
}
#fancybox-bg-n {
	top: -20px;
	left: 0;
	width: 100%;
	background-image: url('images/photo/fancybox-x.png');
}
#fancybox-bg-ne {
	top: -20px;
	right: -20px;
	background-image: url('images/photo/fancybox.png');
	background-position: -40px -162px;
}
#fancybox-bg-e {
	top: 0;
	right: -20px;
	height: 100%;
	background-image: url('images/photo/fancybox-y.png');
	background-position: -20px 0px;
}
#fancybox-bg-se {
	bottom: -20px;
	right: -20px;
	background-image: url('images/photo/fancybox.png');
	background-position: -40px -182px;
}
#fancybox-bg-s {
	bottom: -20px;
	left: 0;
	width: 100%;
	background-image: url('images/photo/fancybox-x.png');
	background-position: 0px -20px;
}
#fancybox-bg-sw {
	bottom: -20px;
	left: -20px;
	background-image: url('images/photo/fancybox.png');
	background-position: -40px -142px;
}
#fancybox-bg-w {
	top: 0;
	left: -20px;
	height: 100%;
	background-image: url('images/photo/fancybox-y.png');
}
#fancybox-bg-nw {
	top: -20px;
	left: -20px;
	background-image: url('images/photo/fancybox.png');
	background-position: -40px -122px;
}
#fancybox-title {
	font-family: Helvetica;
	font-size: 12px;
	z-index: 1102;
}
.fancybox-title-inside {
	padding-bottom: 10px;
	text-align: center;
	color: #333;
	background: #fff;
	position: relative;
}
.fancybox-title-outside {
	padding-top: 10px;
	color: #fff;
}
.fancybox-title-over {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #FFF;
	text-align: left;
}
#fancybox-title-over {
	padding: 10px;
	background-image: url('images/photo/fancy_title_over.png');
	display: block;
}
.fancybox-title-float {
	position: absolute;
	left: 0;
	bottom: -20px;
	height: 32px;
}
#fancybox-title-float-wrap {
	border: none;
	border-collapse: collapse;
	width: auto;
}
#fancybox-title-float-wrap td {
	border: none;
	white-space: nowrap;
}
#fancybox-title-float-left {
	padding: 0 0 0 15px;
	background: url('images/photo/fancybox.png') -40px -90px no-repeat;
}
#fancybox-title-float-main {
	color: #FFF;
	line-height: 29px;
	font-weight: bold;
	padding: 0 0 3px 0;
	background: url('images/photo/fancybox-x.png') 0px -40px;
}
#fancybox-title-float-right {
	padding: 0 0 0 15px;
	background: url('images/photo/fancybox.png') -55px -90px no-repeat;
}
/* IE6 */
.fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_close.png', sizingMethod='scale'); }
.fancybox-ie6 #fancybox-left-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_nav_left.png', sizingMethod='scale'); }
.fancybox-ie6 #fancybox-right-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_nav_right.png', sizingMethod='scale'); }
.fancybox-ie6 #fancybox-title-over { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_title_over.png', sizingMethod='scale'); zoom: 1; }
.fancybox-ie6 #fancybox-title-float-left { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_title_left.png', sizingMethod='scale'); }
.fancybox-ie6 #fancybox-title-float-main { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_title_main.png', sizingMethod='scale'); }
.fancybox-ie6 #fancybox-title-float-right { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_title_right.png', sizingMethod='scale'); }
.fancybox-ie6 #fancybox-bg-w, .fancybox-ie6 #fancybox-bg-e, .fancybox-ie6 #fancybox-left, .fancybox-ie6 #fancybox-right, #fancybox-hide-sel-frame {
	height: expression(this.parentNode.clientHeight + "px");
}
#fancybox-loading.fancybox-ie6 {
	position: absolute; margin-top: 0;
	top: expression( (-20 + (document.documentElement.clientHeight ? document.documentElement.clientHeight/2 : document.body.clientHeight/2 ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop )) + 'px');
}
#fancybox-loading.fancybox-ie6 div	{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_loading.png', sizingMethod='scale'); }
/* IE6, IE7, IE8 */
.fancybox-ie .fancybox-bg { background: transparent !important; }
.fancybox-ie #fancybox-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_shadow_n.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-ne { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_shadow_ne.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-e { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_shadow_e.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-se { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_shadow_se.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_shadow_s.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-sw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_shadow_sw.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-w { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_shadow_w.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-nw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_shadow_nw.png', sizingMethod='scale'); }

第五步：打开当前主题添加以下函数（最后?>之前，否则你懂得）。

/* 给指定文件增加class属性 */
function photo_onedou ($content)
{   global $post;
    $pattern = "/]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i";
    $replacement = '$7';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}
add_filter('the_content', 'photo_onedou');

从上可知，支持bmp、gif、jpeg、png和swf，也就是支持flash。轻松搞定，看看效果吧：

附官网网址：http://fancybox.net/

PS:使用fancybox由于js的原因会造成IE假死。故把prettyphoto插件集成了。

26 条留言

8
小艾博客 2015-05-22 11:28

你的着图片没有效果呀？你把那个效果取消了？

回复

m
Ankms 2015-05-24 08:06

@小艾博客
嗯，早就取消了。 ➡

回复

c
CY's BLOG 2014-02-21 20:59

来过。
看过~

回复
e
bedspreads 2011-10-07 22:15

互相支持下哈

回复
a
绿子弹 2011-05-12 19:45

厉害！你的主题做的蛮不错的

回复

m
Ankms 2011-05-12 20:27

还行吧，仍然在改进中。 ❗

回复

h
爱佳软 2011-05-09 11:07

请问你这种方法支持相册里面的图片吗？

回复

m
Ankms 2011-05-09 20:30

还没有试过相册，应该是支持的，都是替换原地址，再加个属性。

回复

h
爱佳软 2011-05-11 20:37

我的博客也实现了免插件Fancybox，不过不是你这种方法。是把Fancybox这个wordpress插件集成到了主题里，把几个js合并为一个，然后指定文章调用（需要fancybox的文章调用js），这样就不会影响其他页面的打开速度了。演示地址：
http://www.92app.com/actual-wysiwyg-editor-for-wordpress.html
😯

回复

h
爱佳软 2011-05-11 20:38

？咦？“链接自动检测+本地化转换”？好神奇 🙄

回复
m
Ankms 2011-05-11 20:44

fancybox会使IE假死，我是只有在single页面调用。
突然发现那个网址怎么那么长，bug，找找解决方法。

回复

h
爱佳软 2011-05-11 23:07

是啊，好长，会把小孩子吓到的 💡

b
baby walker 2011-03-04 10:39

这个是什么动画人物啊

回复

m
Ankms 2011-03-04 22:55

汗，看来你没玩过dota，如果有机会了玩玩，很经典的一款游戏。图中英雄角色的叫做冰女。

回复

h
期货配资 2011-03-01 13:14

谢谢博主的分享，这插好吗

回复

m
Ankms 2011-03-02 11:04

可以试试，就是实现图片特效的插件，你也可以试试其他的。不过你的评论被拉黑了。。 😕

回复

p
电脑专家博客 2011-02-14 06:55

不错~~~回访了 😈

回复

m
Ankms 2011-02-14 07:33

暂时没时间？还需要修改一大堆，又发现了几个bug。 😥

回复

p
电脑专家博客 2011-02-14 07:36

慢慢来等你的完整版 😎

回复

m
Ankms 2011-02-14 19:25

IE最头疼了。服了它，永远那么有个性，N多不支持。。 🙁

回复

p
电脑专家博客 2011-02-14 19:27

真佩服你的敬业精神！我比较懒弄这些太麻烦 😛 加油
m
Ankms 2011-02-14 19:32

折腾不动了，老了， 😈 ，这个主题完善之后再也不会弄其他主题了。不过为别人仿还是可以的。 😮

p
饭小烦 2011-02-11 18:33

这个主题真不错

回复

m
Ankms 2011-02-11 21:10

仿的，感觉还可以。源程序是国外的论坛程序。。

回复

y
ylsnuha 2011-02-08 18:20

这个主题还蛮不错的

回复

m
Ankms 2011-02-11 06:16

自己仿的，目前IE下还存在一点问题。。 ❓

回复

相关文章查看更多文章

洋垃圾无线AP Ruckus R710折腾记

关于unRAID系统下CPU负载信息不显示的问题

windows 10下注册表快速导入小鹤双拼方案

VBA实例:Excel增加正则表达式函数

女排夺冠奖励自己-DELL OptiPlex 7040 SFF

26 条留言

留言 取消

留言取消