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

见到各位的请求,今天就找点时间将点击放大效果实现出来!总共修改了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保存在本地,自己引用,不知道什么时候会失效了呢!

© 版权声明
THE END
喜欢就支持以下吧
点赞0赞赏
分享
评论 共7条

请登录后发表评论

    • HF
    • kesintisiz0

      Membaca blog kaka selalu dapet hal baru yang betmanfaat, thanks ka untuk informasinya. Lorette Germain Lissi

      2月前
    • HF
    • 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

      2月前
    • HF
    • online0

      A further issue is that video gaming has become one of the all-time main forms of entertainment for people of various age groups. Kids engage in video games, and also adults do, too. Your XBox 360 is probably the favorite gaming systems for many who love to have a huge variety of activities available to them, in addition to who like to play live with people all over the world. Thank you for sharing your notions. Cinderella Wyatan Petronia

      2月前
    • HF
    • torrent0

      Hello! I just would like to give a huge thumbs up for the great info you have here on this post. I will be coming back to your blog for more soon. Ingunna Eb Korney

      2月前
    • HF
    • 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

      2月前
    • HF
    • watch0

      Here you will be provided with food of Gods! So delicious, dunno how they do this but this is just unreal. Ferne Alejoa Chastity

      2月前
    • HF
    • 学不好英语不改网名0

      感谢,学到了 {{doge}}

      9月前