如何实现wordpress文章中图片点击放大及幻灯功能

Web前端 潘老师 12个月前 (03-20) 460 ℃ (0) 扫码查看



wordpress文章中的图片如果不使用插件或者自己写代码实现,是无法在我们点击图片时,将图片放大,当有多个图片是,也没办法利用类似幻灯片方式来查看所有图片,今天子夜资源网教大家如何使用fancybox来实现图片放大以及灯箱功能。

实现步骤

1)找到你所使用的主题里的header.php头部文件,在里面新增fancybox的css代码引用,内容如下:

<link rel="stylesheet" rel="nofollow" href="https://zy.panziye.com/jump/?url=aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2ZhbmN5YXBwcy9mYW5jeWJveEAzLjUuNy9kaXN0L2pxdWVyeS5mYW5jeWJveC5taW4uY3Nz" />

2)找到footer.php的页脚文件,新增fancybox的js引用,如下:

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

3)找到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;
 }

4)然后我们再去访问文章页面,发现电机图片就出现放大效果,并且当有多张图片是,可以有幻灯片的等效效果,赶紧快来试试吧!


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/java/web/5947.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】