1. 放肆雷特 - 锋哥的博客首页
  2. 程序生涯
  3. WordPress

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

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

代码解读:添加文章后,将文章中的图片链接自动添加上rel=fancybox属性用于在初始化时对图片的筛选
2、修改主题header.php文件
在header.php文件中加入

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url') ?>/js/fancybox/jquery.fancybox.css" />
<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的版本导致的

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

原创文章,作者:锋哥,如若转载,请注明出处:https://www.fangsi.net/127.html

发表评论

登录后才能评论

评论列表(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
    CY's BLOG 2014年2月21日 21:01

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

    • 胖子
      锋哥 回复 CY's BLOG 2014年2月22日 18:57

      你是要在打开图片之后显示图片的名字还是?

    • CY's BLOG
      CY's BLOG 回复 锋哥 2014年2月23日 19:10

      对的,就像fancybox插件默认的效果那样。

      能在底部或是什么地方把图片名称显示出来。

    • 胖子
      锋哥 回复 CY's BLOG 2014年2月23日 21:11

      这个可以的,需要把参数修改一下就可以了。你要看看它的API。

    • CY's BLOG
      CY's BLOG 回复 锋哥 2014年2月24日 09:54

      好滴,回头仔细看看

  • mooc
    mooc 2014年2月10日 20:03

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

    • 胖子
      锋哥 回复 mooc 2014年2月11日 08:44

      试试fancybox({’overlayColor’: ‘#000′});

  • logmi
    logmi 2014年1月4日 10:53

    为什么我不行啊? 😡

    • 胖子
      锋哥 回复 logmi 2014年1月4日 12:12

      你是按照我的这种方式来做的吗?如果是的应该可以。除非你的主题里面还有其他的插件导致不兼容了。

    • whaever
      whaever 回复 锋哥 2014年1月16日 19:17

      在header.php文件中加入

      可能先于 jquery.js 加载 自然 $ 函数 不会生效效

      在 foot.php 中加比较好

    • 胖子
      锋哥 回复 whaever 2014年1月16日 19:33

      嗯。加载foot中也行,这个看个人喜好就好了。

  • 魅叶子
    魅叶子 2013年8月10日 08:38

    说的不明不白。 😡

    • 胖子
      锋哥 回复 魅叶子 2013年8月11日 15:47

      真的不好意思,文笔不好。我也在慢慢的锻炼。请见谅!如果有看不懂或者不理解得欢迎与我私聊。

  • 魅叶子
    魅叶子 2013年8月10日 08:27

    站点的JS目录在哪? 😕

    • 胖子
      锋哥 回复 魅叶子 2013年8月11日 15:46

      站点的js目录就是你主题里面新建一个名字叫做JS得文件夹。

联系我们

在线咨询:点击这里给我发消息

邮件:service@fangsi.net

工作时间:周一至周五,9:30-18:30,节假日休息