为WordPress加入Fancybox相册功能免插件实现

锋哥 • 2013年5月7日 21:08 • WordPress, 程序生涯

博客搭建已经有好几天了，上线比较匆忙。白天也忙工作没有多少时间完善它，在之前就一直用着Fancybox这款相册插件。由于我现在的主题使用的jquery是1.9的，安装相册插件之后貌似出现了不少问题。看样子必需得自己动手了。在网上找了很久的资料，自己也尝试了很久。网上大部分都是用的lightbox，我从官网下载了最新版的不支持jQuery1.9。所以找资料无果后自己动手..
首先从Fancybox官网下载它的压缩包，在主题的JS目录内新建一个fancybox目录。把下载的压缩包解压找到sources目录中的下列文件

拷贝到fancybox目录。到这里，基础工作准备完毕，下一步就开始引用fancybox
1、修改主题function.php文件
在function.php文件中加入

//fancybox 自动对图片链接添加rel=fancybox属性
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文件
在header.php文件中加入

<script src="<?php bloginfo('template_url') ?>/js/fancybox/jquery.fancybox.pack.js"></script>
<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的版本导致的

如果还有谁遇到了问题，欢迎随时补充。下面一起来看看效果

本博客所有文章如无特别注明均为原创

如果觉得对你有帮助，可以通过下方打赏对作者表示鼓励

本文采用知识共享署名-非商业性使用-相同方式共享

如若转载，请注明出处：《为WordPress加入Fancybox相册功能免插件实现》https://www.fangsi.net/127.html

打赏

微信扫一扫

支付宝扫一扫

锋哥管理员

0 21

利用WordPress短代码插入无广告的优酷视频

上一篇 2013年5月6日 14:41

元拓集团青天寨活动，一次有汗水有热血的出行

下一篇 2013年5月8日 14:10

发表回复

登录后才能评论

评论列表（21条）

龙笑天 2014年5月23日 22:13

对于特别大的图片，怎样让它产生双击出现原图且图片能拖动呢？

回复
- 龙笑天 2014年5月23日 22:14
  
  @龙笑天：或者出现一个显示原图的按钮且图片可以拖动！
  
  回复
- 锋哥 2014年5月24日 23:01
  
  @龙笑天：这个插件显示的大图是超链接的图。而默认显示的是你放在超链接里面的图，你点击图片打开的就是大图了。这个也是可以拖动的啊。
  
  回复
熊熊 2014年4月12日 12:59

那怎么把这效果加入到视频中捏？

回复
- 锋哥 2014年4月13日 20:53
  
  @熊熊：推荐你去看看他们官网www.fancybox.net，它里面有关于视频iframe的弹出方式，和图片差不多。
  
  回复
- 熊熊 2014年4月13日 22:16
  
  @锋哥：谢谢，我去看看
  
  回复
CY's BLOG 2014年2月21日 21:01

这代码和大发提供的比较类似。
我提出个疑问，怎样才能显示图片的名字呢？

回复
- 锋哥 2014年2月22日 18:57
  
  @CY’s BLOG：你是要在打开图片之后显示图片的名字还是？
  
  回复
- CY's BLOG 2014年2月23日 19:10
  
  @锋哥：对的，就像fancybox插件默认的效果那样。
  
  能在底部或是什么地方把图片名称显示出来。
  
  回复
- 锋哥 2014年2月23日 21:11
  
  @CY’s BLOG：这个可以的，需要把参数修改一下就可以了。你要看看它的API。
  
  回复
- CY's BLOG 2014年2月24日 09:54
  
  @锋哥：好滴，回头仔细看看
  
  回复
mooc 2014年2月10日 20:03

学习了~！ :grin: 不过还想问一下，怎么设置参数呢？我试了下在.fancybox(); 括号中间加入’overlayColor’: ‘#000’, 没有效果，怎么做呢？

回复
- 锋哥 2014年2月11日 08:44
  
  @mooc：试试fancybox({’overlayColor’: ‘#000′});
  
  回复
logmi 2014年1月4日 10:53

为什么我不行啊？ :mad:

回复
- 锋哥 2014年1月4日 12:12
  
  @logmi：你是按照我的这种方式来做的吗？如果是的应该可以。除非你的主题里面还有其他的插件导致不兼容了。
  
  回复
- whaever 2014年1月16日 19:17
  
  @锋哥：在header.php文件中加入
  
  可能先于 jquery.js 加载自然 $ 函数不会生效效
  
  在 foot.php 中加比较好
  
  回复
- 锋哥 2014年1月16日 19:33
  
  @whaever：嗯。加载foot中也行，这个看个人喜好就好了。
  
  回复
魅叶子 2013年8月10日 08:38

说的不明不白。 :mad:

回复
- 锋哥 2013年8月11日 15:47
  
  @魅叶子：真的不好意思，文笔不好。我也在慢慢的锻炼。请见谅！如果有看不懂或者不理解得欢迎与我私聊。
  
  回复
魅叶子 2013年8月10日 08:27

站点的JS目录在哪？ :???:

回复
- 锋哥 2013年8月11日 15:46
  
  @魅叶子：站点的js目录就是你主题里面新建一个名字叫做JS得文件夹。
  
  回复

为WordPress加入Fancybox相册功能免插件实现

相关推荐

发表回复

评论列表（21条）