Web笔记··By/蜜汁炒酸奶

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

WordPress代码实现Fancybox相册功能
1882 10

准备：

1.jQuery(最好是1.9及以上)；

[Downlink href=‘http://jquery.com/download/’]点此下载最新版jQuery[/Downlink]

2.Fancybox相关文件;

[Downlink href=‘http://fancyapps.com/fancybox/’]点此下载Fancybox[/Downlink]（打开官网后一直往下拉，在中间左右的位置上）

实现：

1.下载解压后从source文件夹中选择如下几个基本文件：wp_Fancybox.png 可以在js里面建个相应文件夹放置，也可分开放置，若图片与其他文件分开记得修改css里面的图片链接地址。 2.修改主题function.php文件 在function.php文件中加入

//自动添加暗箱标签属性
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;
}
1
2
3
4
5
6
7
8
9

代码解读：添加文章后，将文章中的图片链接自动添加上rel=fancybox**属性用于在初始化时对图片的筛选 例：

<img  src="#" rel='fancybox'>
1

3.修改主题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
2
3
4
5
6
7
8

(也可以在footer.php中添加) 4.拓展： 若要添加鼠标滚动：载入lib文件夹中的jquery.mousewheel-3.0.6.pack.js文件。 更多功能大家自己探索吧O(∩_∩)O~

后省（2015-12-24）

当初写时没细看代码，现在反过来看时感觉用来控制对应的应该是图片代码中的

rel='fancybox'
1

与header.php文件中的

jQuery(".gallery a").attr({rel: "fancybox"});
1

，将rel='fancybox’的fancybox改为其他名字时需要同时改这两处地方。

效果展示

该效果现已不存在-2015-12-24 （若要使用相册效果，记得链接到图片哦）： 00.jpg1827250.jpgdianzimingpian.jpg

预览
除特别注明外，本站所有文章均为 windcoder 原创，转载请注明出处来自： to-add-fancybox-album-features-free-wordpress-plug-in-implementation
License CC BY-SA 4.0 以商业目的使用本网站原创内容需获许可，非商业目的使用授权遵循CC BY-NC 4.0
Loading comments...
10 条评论
  • W
    求助2015-12-16 08:00:00

    大神·· 这个加完了之后怎么操作呢？

    • W
      蜜汁炒酸奶 2015-12-25 08:00:00

      回复 @求助： 加完之后应该就已经可以显示效果了额

  • W
    CY's BLOG2014-02-21 08:00:00

    你这是改了CSS的吧。。

    • W
      蜜汁炒酸奶 2014-02-21 08:00:00

      回复 @CY's BLOG： css那块我没改过，或许这款主题的作者改过吧，我之前也就多引用了个js文件

  • W
    草陌博客2014-02-05 08:00:00

    貌似还可以啊

    • W
      蜜汁炒酸奶 2014-02-07 08:00:00

      回复 @草陌博客： 恩，其实还有一个加载较少的，都差不多

  • W
    Joe2014-02-03 08:00:00

    在家你还能折腾，真不错～

    • W
      蜜汁炒酸奶 2014-02-07 08:00:00

      回复 @Joe： 运气好吧

  • W
    PHP二次开发2014-02-03 08:00:00

    应该放个图片更形象。

    • W
      蜜汁炒酸奶 2014-02-03 08:00:00

      回复 @PHP二次开发： <a href="#div-comment-353" rel="nofollow">@PHP二次开发 </a>不错的建议，只是这款主题用的不是这个做的。。

example
预览