今天把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插件集成了。
你的着图片没有效果呀 ?你把那个效果取消了?
@小艾博客
嗯,早就取消了。 ➡
来过。
看过~
互相支持下哈
厉害!你的主题做的蛮不错的
还行吧,仍然在改进中。 ❗
请问你这种方法支持 相册里面的图片吗?
还没有试过相册,应该是支持的,都是替换原地址,再加个属性。
我的博客也实现了免插件Fancybox,不过不是你这种方法。是把Fancybox这个wordpress插件集成到了主题里,把几个js合并为一个,然后指定文章调用(需要fancybox的文章调用js),这样就不会影响其他页面的打开速度了。演示地址:
http://www.92app.com/actual-wysiwyg-editor-for-wordpress.html
😯
?咦?“链接自动检测+本地化转换”?好神奇 🙄
fancybox会使IE假死,我是只有在single页面调用。
突然发现那个网址怎么那么长,bug,找找解决方法。
是啊,好长,会把小孩子吓到的 💡
这个是什么动画人物啊
汗,看来你没玩过dota,如果有机会了玩玩,很经典的一款游戏。图中英雄角色的叫做冰女。
谢谢博主的分享,这插好吗
可以试试,就是实现图片特效的插件,你也可以试试其他的。不过你的评论被拉黑了。。 😕
不错~~~回访了 😈
暂时没时间?还需要修改一大堆,又发现了几个bug。 😥
慢慢来 等你的完整版 😎
IE最头疼了。服了它,永远那么有个性,N多不支持。。 🙁
真佩服你的敬业精神!我比较懒 弄这些太麻烦 😛 加油
折腾不动了,老了, 😈 ,这个主题完善之后再也不会弄其他主题了。不过为别人仿还是可以的。 😮
这个主题真不错
仿的,感觉还可以。源程序是国外的论坛程序。。
这个主题还蛮不错的
自己仿的,目前IE下还存在一点问题。。 ❓