纯代码博客图片添加灯箱效果

作者: 管理员 分类: 源码展示 发布时间: 2020-09-25 15:33

作为一个小小站长,一定要把小站打扮得美美的,我们平时在查看图片,图片太小看中不太美观,所以需要给小站添加一个灯箱效果的展示,但是不想用插件的我,终于找到了一款灯箱图片的部署方法,如图:

部署方法:

1.将下列css及js文件下载下来,分别放在你主题下css及js目录下

/**图片灯箱自动给图片加链接**/
add_filter('the_content', 'fancybox');
function fancybox($content){ 
    $pattern = array("https://cdn.hlhasd.com/]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i","https://cdn.hlhasd.com/]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i");
    $replacement = array('','$7');
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

在主题下header.php文件head下加入如下代码:

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/jquery.fancybox.min.css">

在主题下footer.php文件</body>前加入如下代码:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.fancybox.min.js"></script>

快去看看效果吧!~~


发表评论

电子邮件地址不会被公开。