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

准备:

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

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

2.Fancybox相关文件;

[Downlink href='http://fancyapps.com/fancybox/']点此下载Fancybox[/Downlink](打开官网后一直往下拉,在中间左右的位置上)

实现:

1.下载解压后从source文件夹中选择如下几个基本文件:

可以在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;
}

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

例:

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

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>

(也可以在footer.php中添加)

4.拓展:

若要添加鼠标滚动:载入lib文件夹中的jquery.mousewheel-3.0.6.pack.js文件。

更多功能大家自己探索吧O(∩_∩)O~

后省(2015-12-24)

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

rel='fancybox'

与header.php文件中的

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

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

效果展示

该效果现已不存在-2015-12-24

(若要使用相册效果,记得链接到图片哦):

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏拂晓风起

双击bat用CMD窗口打开jar (专为没有界面的java程序设计的)

17030
来自专栏Ken的杂谈

JS/Jquery解决回车键触发表单提交问题

因为现在大多数浏览器,当表单中的文本框或其他可提交元素为当前焦点时,敲回车键就会触发表单提交。

22520
来自专栏Petrichor的专栏

tkinter: 事件 & 绑定 (Events and Bindings)

15420
来自专栏DeveWork

DeveWork.com 上线“前端工具箱”(附源码下载)

昨晚的时候本站上线了“前端开发工具箱”,传送门:http://devework.com/tool,上面的导航栏也有入口。目前有CSS压缩/格式化/属性排序、在线...

28090
来自专栏.Net移动开发

Smobiler 4.0 正式发布

11930
来自专栏DeveWork

Google Chrome 浏览器 开发者工具 使用教程

对于Chrome 浏览器,除了占用内存的缺点,其他都很不错。对于Chrome 浏览器的开发者工具,Jeff 除了Elements、Resources、Netwo...

59060
来自专栏ytkah

小程序提升界面使用体验 丰富了内容展示组件

  昨晚,微信小程序开放了更多页面内能力,主要是提升界面使用体验、丰富内容展示组件、完善系统硬件能力,这些能力的提升可以帮助开发者更好地优化使用体验,让用户爱上...

46580
来自专栏Jerry的SAP技术分享

使用JavaScript将当前页面保存成PDF,支持图片和文字的保存

前端开发的朋友们可能会遇到这个需求:将您负责开发的网页的全部内容,包括文字和图片,一起保存成一个PDF文件。如果采用屏幕截图的话,默认Windows操作系统的截...

88520
来自专栏iKcamp

微信小程序教学第二章:小程序中级实战教程之预备篇 - 项目结构设计 |基于最新版1.0开发者工具

第二章:小程序中级实战教程之预备篇    项目结构设计 教学视频地址:https://v.qq.com/x/page/q05544lzelw.html ...

23770
来自专栏向治洪

Xcode 8新功能介绍

概述 Xcode 8正式版在9月13日已经推送给开发者下载,下载之后就出现了很多编译错误,之前的插件也不能用了,但是发现Xcode8把好多不错的插件功能整合到自...

22650

扫码关注云+社区

领取腾讯云代金券