WordPress fancybox点击图片放大效果

WordPress点击图片放大效果的实现方法

文章目录

起因:百度落地页检测工具说奶爸de笔记不符合移动规范,就是图片在手机端不能点击放大查看,所以就研究WordPress点击图片放大效果。(添加后百度依然提示不符合,所以撤了,没必要要让网页多加载一个JS跟CSS文件,因为我文章配图都不算高清,不用放大。)

效果大概就下图这样,完整效果点这里查看(网址打开后往下翻到Demos)。

图片点击放大

下面是WordPress实现图片点击放大灯箱lightbox效果的方法,分为代码版和插件版。

WordPress点击图片放大效果代码版

代码版的方法最初是搜到了老俍(liáng)的这篇文章,不过他用的fancyBox版本还是3.2.7的,目前最新的fancyBox是3.5.7,所以直接去fancyBox官网下载最新的js和css文件,然后传到空间调用就行了,方法如下:

打开你当前使用的WordPress主题,然后找到主题页眉文件(header.php),添加下面这串代码。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

如果你不知道添加到哪里,参见下图,添加到其他link参数下面一行就可以。

主题页眉文件

然后在页脚文件(footer.php)插入下面这行代码。

<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

插入到body代码上面一行就行。测试了下官网提供的这个cdn地址没被墙,所以你可以放心添加,稳妥点的方法是下载到自己服务器引用。

主题页脚文件

本来还需要插入一段jquery-3.3.1.min.js的文件,不过大多数主题都带有jquery的js文件,只不过版本不一样,如果你的用不了,可以添加(代码见下方),也可以使用后面推荐的插件,这样可以少引入一个js文件。

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

接下来在主题函数文件里面插入下面这串代码

/**FancyBox图片灯箱自动给图片加链接**/
add_filter('the_content', 'fancybox');
function fancybox($content){ 
    $pattern = array("/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i","/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i");
    $replacement = array('<a$1href=$2$3.$4$5 data-fancybox="gallery"><img$1src=$2$3.$4$5$6></a>','<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>');
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

如果你不知道添加到哪里,参考安全添加代码到functions.php文件的方法:Code Snippets

当然,你也可以考虑不加上面这串代码,那么你就需要每次发文章的时候手动选择让图片链接到源文件,并且添加data-fancybox=”gallery”属性。

做好这些,WordPress点击图片放大效果就实现了。

WordPress点击图片放大效果插件版

有一款名叫Simple Fancybox的WordPress插件,就是把fancybox代码封装成了插件,也很小巧,你如果觉得手动添加代码麻烦,那么可以考虑使用插件。

插件下载地址:https://wordpress.org/plugins/simple-fancybox/

安装好插件,启用,前台测试看看是否有效果,如果没有效果,是因为这个插件默认只是给图片img添加了data-fancybox=”gallery”属性,但是并没有添加a属性,所以需要给图片添加一个超链接到原图的属性,你可以使用奶爸修改的这个版本。

奶爸修改版Simple Fancybox下载地址:https://www.lanzous.com/i4g38of

如果你自己要修改的话,插件42和43行换成下面这个就行了。

$pattern = "/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i";"/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i";
$replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"><img$1src=$2$3.$4$5$6></a>';'<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>';

什么是百度落地页检测工具

百度的落地页检测工具简单说就是用来测试你网站在手机上访问是否符合百度的规定,具体规定可以参考百度移动搜索落地页体验白皮书4.0

如果你要自己检测一下自己网站是否符合百度的规则,那么点击这里。(需要先注册百度账号并且验证你网站所有权。)

什么是fancybox

fancybox官网:https://fancyapps.com/fancybox/3/

自定义文档:https://fancyapps.com/fancybox/3/docs/

fancybox是一个JavaScript的lightbox效果插件,就是我们常说的图片灯箱效果。支持对放大的图片添加阴影效果,对于一组相关的图片添加导航操作按纽。

fancybox不光支持PC端,移动端同样支持;

支持图片、html文本、flash动画、iframe以及ajax,支持自定义效果和功能。

也就是说使用fancybox你不单单可以给图片添加灯箱效果,也可以给html、视频这些内容添加灯箱效果,详细的内容你可以参考官网页面的下半部分,有详细的演示和创意用法。

提醒的是,fancybox根据 GPLv3许可证授权所有开源应用程序。 所有商业应用程序(包括您计划销售的网站,主题和应用程序)都需要商业许可证。

版权申明
如未注明,均为奶爸笔记原创,码字不易,转载请注明出处及原文链接!
本文标题:《WordPress点击图片放大效果的实现方法》
本文链接地址:https://blog.naibabiji.com/archives/1768
打赏 赞(0)
微信
支付宝
微信二维码图片

微信扫描二维码打赏

支付宝二维码图片

支付宝扫描二维码打赏

你可能感兴趣

22 thoughts on “WordPress点击图片放大效果的实现方法

    1. Avatar for ᕕ(ᐛ)ᕗ变身!ᕕ(ᐛ)ᕗ变身! 文章作者

      我以前也是尽量不用图片,现在不同了,为了流量,还是要用点图让文章好看点。

      回复
    1. Avatar for ᕕ(ᐛ)ᕗ变身!ᕕ(ᐛ)ᕗ变身! 文章作者

      如果插入的是缩略图的话还是有必要,像我这种插入原图,并且原图大小都不超过800px的,放大不放大都看得清,手机端访问量没过一半,不照顾他们的体验了。

      回复
  1. Avatar for 青山青山

    我博客也加的这个灯箱效果,不过相册形式的图片没有效果显示,不知道咋搞。建议你博客弄个ajax评论提交。

    回复
    1. Avatar for ᕕ(ᐛ)ᕗ变身!ᕕ(ᐛ)ᕗ变身! 文章作者

      以后流量大了在考虑加,现在不慌。多刷新一次页面多加点PV也是极好的。

      回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注