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

见到各位的请求,今天就找点时间将点击放大效果实现出来!总共修改了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;
}

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

图片[1]-文章内图片点击放大效果(支持外链)-嗨皮网(Hpeak.cn)

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

© 版权声明
THE END
喜欢就支持一下吧
点赞2赞赏
分享
评论 共3条

请登录后发表评论

    • HF的头像-嗨皮网(Hpeak.cn)
    • movie online0
      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
      8月前
    • HF的头像-嗨皮网(Hpeak.cn)
    • hindi movie0
      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
      8月前
    • HF的头像-嗨皮网(Hpeak.cn)
    • 学不好英语不改网名0
      感谢,学到了 {{doge}}
      1年前