首页 > CMS应用 > 正文
免插件为wordpress主题添加Fancybox图片暗箱效果

上一篇文章wordpress图片自动链接到原图并增加额外样式(传送门)提到的为wordpress文章中图片自动添加url到原图以及添加额外css的办法的最常应用就是免插件为wordpress添加图片暗箱效果,当然你也可以通过插件来实现这一效果,目前的图片暗箱插件很多,譬如:wp-slimbox2、jQuery Lightbox、jQuery Colorbox、、Gameplorer`s WPColorBox、shadowbox-js等等,其实所有的这些图片暗箱特效插件都是可以通过以下方法来集成到wordpress主题中,而实现免插件效果的。为什么用插件一键就可以实现的功能非要再折腾一下呢,以Fancybox为例,前不久爆出漏洞,不知道有多少使用Fancybox插件的wordpress站点中标,所以你懂的!

步骤1:去Fancybox官方下载最新的js文件以及css文件,或者安装Fancybox插件之后将对应的文件拷出来!

步骤2:在wordpress主题顶部加载js以及css文件,同时别忘了加载jquery

<script type="text/javascript" src="jquery-latest.min.js"></script>
<link rel="stylesheet" href="jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.fancybox.pack.js?v=2.1.5"></script>

步骤3:添加控制图片弹出的css容器控制代码:

<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>

步骤4:为wordpress文章内图片增加额外的css,一下代码添加到当前主题的functions.php,注意php起始,此方法必须你在发布文章的时候插入图片选择链接到媒体源文件,不然无法添加额外css。

//自动添加标签属性 
add_filter('the_content', 'pirobox_gall_replace');   
function pirobox_gall_replace ($content)   
{   global $post;   
    $pattern = "/]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";   
    $replacement = '$7';   
    $content = preg_replace($pattern, $replacement, $content);   
    return $content;   
}  

OK,打完收工!
以上方法是以fancybox为例子,具体可以拓展的有很多,同时fancybox能够应用的特效也有很多,自己慢慢折腾吧!

文章评论

共有 1 条评论

  1. 漫妮

    看文章的都发表一下看法

Top