今天给大家介绍下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