今天给大家介绍下Fancybox免插件加加入到wordpress。
首先从Fancybox官网下载它的压缩包,然后根据自己的主题构造把css和js放在对应目录。至此基本任务已经完成。
下一步引用Fancybox到自己的主题。
1.修改fanction.php
在这个文件的在后面加入一下代码:
//fancybox 自动对图片链接添加rel=fancybox属性

  1. <?php     
  2. add_filter('the_content', 'pirobox_gall_replace');  
  3. function pirobox_gall_replace ($content)  
  4. global $post;  
  5. $pattern = "/&lt;a(.*?)href=('|\")([^&gt;]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)&gt;(.*?)&lt;\/a&gt;/i";  
  6. $replacement = '&lt;a$1href=$2$3.$4$5 rel="fancybox"$6&gt;$7';  
  7. $content = preg_replace($pattern$replacement$content);  
  8. return $content;  
  9. }  
  10.  ?>    

添加文章后,将文章中的图片链接自动添加上rel=fancybox属性用于在初始化时对图片的筛选
2.在header.php引用刚才解压的js和css
-在自己的js文件里面加入

  1. <script type="text/javascript">;  
  2. $(function() {  
  3. jQuery(".gallery a").attr({rel: "fancybox"});  
  4. jQuery("a[rel=fancybox]").fancybox();  
  5. });  
  6. </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的版本导致的
正文到此结束

留言

0条评论

LEAVE A REPLY

  • face face face face face face face face face face face face face face face face face face face face face face face face face