今天给大家介绍下Fancybox免插件加加入到wordpress。
首先从Fancybox官网下载它的压缩包，然后根据自己的主题构造把css和js放在对应目录。至此基本任务已经完成。
下一步引用Fancybox到自己的主题。
1.修改fanction.php
在这个文件的在后面加入一下代码：
//fancybox 自动对图片链接添加rel=fancybox属性
- <?php
- add_filter('the_content', 'pirobox_gall_replace');
- function pirobox_gall_replace ($content)
- { global $post;
- $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";
- $replacement = '<a$1href=$2$3.$4$5 rel="fancybox"$6>$7';
- $content = preg_replace($pattern, $replacement, $content);
- return $content;
- }
- ?>
添加文章后，将文章中的图片链接自动添加上rel=fancybox属性用于在初始化时对图片的筛选
2.在header.php引用刚才解压的js和css
-在自己的js文件里面加入
- <script type="text/javascript">;
- $(function() {
- jQuery(".gallery a").attr({rel: "fancybox"});
- jQuery("a[rel=fancybox]").fancybox();
- });
- </script>
别往下看了，所有工作已经完成，现在你可以去后台发布文章看看效果了。当然我在做这个功能的时候还是遇到了一点点小问题，下面是对问题处理的过程：
问题1：使用$(“.gallery a”)和$(“a[rel=fancybox]”)提示找不到对象错误
解决方案：将“$”替换成”jQuery”即可
问题2：使用jQuery(“a[@rel*=fancybox]”)作为选择器条件时出现“Syntax error, unrecognized expression: a[@rel*=fancybox]”错误
解决方案：将”a[@rel*=lightbox]”替换成”a[rel=fancybox]”即可，出现原因是因为jquery的版本导致的
解决方案：将“$”替换成”jQuery”即可
问题2：使用jQuery(“a[@rel*=fancybox]”)作为选择器条件时出现“Syntax error, unrecognized expression: a[@rel*=fancybox]”错误
解决方案：将”a[@rel*=lightbox]”替换成”a[rel=fancybox]”即可，出现原因是因为jquery的版本导致的
正文到此结束
版权声明：本文基于《知识共享署名-相同方式共享 3.0 中国大陆许可协议》发布，转载请遵循本协议！！
LEAVE A REPLY