文章内图片点击放大效果(支持外链)

作者 : HF 本文共898个字,预计阅读时间需要3分钟 发布时间: 2020-08-10 共1.49K人阅读

见到各位的请求,今天就找点时间将点击放大效果实现出来!总共修改了3个文件。

现在我们打开主题下的footer.php文件,前添加以下代码引用js

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

第二步,打开主題下的 header.php 文件 在 前引用 下面js

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

第三步,打开主題下的 functions.php 文件,在最底部添加下面代码

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;
}

最后去主题设置一下,不然打开关闭,图片直接消失了!!

自己根据样式调用一下
三个步骤已经完成了,是不是很简单?立刻打开有图片的文章点击看看@@!
个人建议,两个js保存在本地,自己引用,不知道什么时候会失效了呢!

版权声明: 1.本网站名称:Hpeak.cn 2.本站永久网址:https://www.hpeak.cn 3.本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ2727447337进行删除处理。 4.本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。 5.本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报 6.本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
Hpeak.cn » 文章内图片点击放大效果(支持外链)

常见问题FAQ

美化包支持最新版本吗?

3 评论

  1. Hey there! I just would like to give you a huge thumbs up for the excellent info you have right here on this post. I will be coming back to your web site for more soon. Shelli Homerus Palila

  2. After looking into a number of the blog posts on your web page, I honestly appreciate your way of writing a blog. I saved as a favorite it to my bookmark website list and will be checking back soon. Please check out my web site too and let me know what you think. Elayne Lincoln Festatus

发表评论