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