最新消息:本站全面升级HTTPS~~

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

Wordpress 锋哥 12382浏览 0评论

博客搭建已经有好几天了,上线比较匆忙。白天也忙工作没有多少时间完善它,在之前就一直用着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的版本导致的

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

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (21)

  1. 站点的JS目录在哪? 😕
    魅叶子5年前 (2013-08-10)回复
    • 站点的js目录就是你主题里面新建一个名字叫做JS得文件夹。
      胖子5年前 (2013-08-11)回复
  2. 说的不明不白。 😡
    魅叶子5年前 (2013-08-10)回复
    • 真的不好意思,文笔不好。我也在慢慢的锻炼。请见谅!如果有看不懂或者不理解得欢迎与我私聊。
      胖子5年前 (2013-08-11)回复
  3. 为什么我不行啊? 😡
    logmi5年前 (2014-01-04)回复
    • 你是按照我的这种方式来做的吗?如果是的应该可以。除非你的主题里面还有其他的插件导致不兼容了。
      胖子5年前 (2014-01-04)回复
      • 在header.php文件中加入 可能先于 jquery.js 加载 自然 $ 函数 不会生效效 在 foot.php 中加比较好
        whaever5年前 (2014-01-16)回复
        • 嗯。加载foot中也行,这个看个人喜好就好了。
          胖子5年前 (2014-01-16)回复
  4. 学习了~! 😀 不过还想问一下,怎么设置参数呢?我试了下在.fancybox(); 括号中间加入'overlayColor': '#000', 没有效果,怎么做呢?
    mooc4年前 (2014-02-10)回复
    • 试试fancybox({’overlayColor’: ‘#000′});
      胖子4年前 (2014-02-11)回复
  5. 这代码和大发提供的比较类似。 我提出个疑问,怎样才能显示图片的名字呢?
    CY's BLOG4年前 (2014-02-21)回复
    • 你是要在打开图片之后显示图片的名字还是?
      胖子4年前 (2014-02-22)回复
      • 对的,就像fancybox插件默认的效果那样。 能在底部或是什么地方把图片名称显示出来。
        CY's BLOG4年前 (2014-02-23)回复
    • 这个可以的,需要把参数修改一下就可以了。你要看看它的API。
      胖子4年前 (2014-02-23)回复
  6. 那怎么把这效果加入到视频中捏?
    熊熊4年前 (2014-04-12)回复
    • 推荐你去看看他们官网www.fancybox.net,它里面有关于视频iframe的弹出方式,和图片差不多。
      胖子4年前 (2014-04-13)回复
  7. 对于特别大的图片,怎样让它产生双击出现原图且图片能拖动呢?
    龙笑天4年前 (2014-05-23)回复
    • 或者出现一个显示原图的按钮且图片可以拖动!
      龙笑天4年前 (2014-05-23)回复
      • 这个插件显示的大图是超链接的图。而默认显示的是你放在超链接里面的图,你点击图片打开的就是大图了。这个也是可以拖动的啊。
        胖子4年前 (2014-05-24)回复

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册