请在Chrome、Firefox等现代浏览器浏览本站。记住我们的域名:tmy123.com   加入本站QQ群,大家一起HIGH:点击加入QQ群

免插件为WordPress文章中的图片添加FancyBox灯箱效果

WP教程 Jophen 俞 2109℃ 已收录 8评论

WordPress的臃肿体积不得不让我们选择少用插件,那么今天,我们就分享一下如何不用插件来实现比较美观的Fancybox灯箱效果

使用Fancybox需要的文件及工具

1.Fancybox
2.jQuery2.1(版本1.9也可以)我们使用360前端公共库CDN来调用(一般主题都自动加载,此步骤可省略)

下载FANCYBOX:

FANCYBOX

第一步:将下载的压缩包解压,得到一个js文件夹,将这个文件夹上传到您主题的根目录

一般为/wp-content/themes/主题名称/

第二步:修改主题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属性用于在初始化时对图片的筛选

第三步:修改主题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>

注意:经过以上步骤如果没有效果,请在header.php中加入调用jQuery2.1的有关代码
OK了,这样就完成了,看看效果吧~

 

本站文章如未注明,均为原创丨本网站采用BY-NC-SA协议进行授权,转载请注明转自:https://tmy123.com/8760.html
喜欢 (16)
发表我的评论
取消评论
表情 代码 加粗 链接 私信 删除线 签到

Hi,请填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(8)条精彩评论。
  1. 我发现要折腾yusi来你和googlo.me就可以了...工作忙.经常过来逛逛copy代码是个很爽的事情
    黑色网魂丨heisewanghun.com2015年-01月-13日发表回复| unknow| unknow
  2. 哇哇哇,厉害。。。
    小美美2014年-12月-28日发表回复| unknow| unknow
  3. 博主你好 友情链接吗? 要连请说明首页或者内页 谢谢
    易淘金股票池2014年-12月-27日发表回复| unknow| unknow