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

20130507204843

博客搭建已经有好几天了,上线比较匆忙。白天也忙工作没有多少时间完善它,在之前就一直用着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)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
锋哥的头像锋哥管理员
上一篇 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
    CY's BLOG 2014年2月21日 21:01

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

    • 胖子的头像
      锋哥 2014年2月22日 18:57

      @CY’s BLOG你是要在打开图片之后显示图片的名字还是?

    • CY's BLOG
      CY's BLOG 2014年2月23日 19:10

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

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

    • 胖子的头像
      锋哥 2014年2月23日 21:11

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

    • CY's BLOG
      CY's BLOG 2014年2月24日 09:54

      @锋哥好滴,回头仔细看看

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

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

    • 胖子的头像
      锋哥 2014年2月11日 08:44

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

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

    为什么我不行啊? :mad:

    • 胖子的头像
      锋哥 2014年1月4日 12:12

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

    • whaever
      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得文件夹。