WordPress纯代码实现图片灯箱lightbox效果

2021-03-08 0 266

WordPress博客若何获取站点总访问量_wordpress建站wordpress错误

今天在群里唠嗑的时刻有个同伙问有没有推荐的图片点击放大预览的WordPress插件我心想这不就是图片灯箱的效果吗这玩意儿还要用插件吗?

于是便本着助人为乐的心态给准许他用代码整一个着实也挺简朴的就2 3个文件而已整个文件就14k巨细总比插件好好些吧。

最终效果如下图所示

WordPress纯代码实现图片灯箱lightbox效果

下面详细写下使用方法。

下载文件

1、首先下载文件在文章底部点击资源下载按钮下载图片灯箱文件。

2、然后把文件上传到主题目录也就是/wp-content/themes这个目录解压!

WordPress给分类目录添加自定义字段教程_wordpresswordpress错误

3、在主题的header.php和footer.php文件划分加载css和js:

//header.php添加下面代码
<link rel=\"stylesheet\" href=\"<?php bloginfo(\'template_url\'); ?>/plugin/css/lightbox.css\" rel=\"external nofollow\" >

//footer添加下面代码
<script src=\"<?php bloginfo(\'template_url\'); ?>/plugin/js/lightbox.js\"></script>

注重:请确保正在使用的主题已经加载了jquery!

若是你使用的古腾堡编辑器那么教程竣事你可以去试试图片灯箱效果了不外记得把图片属性链接到图像。

若是你使用的是经典编辑器那么还需要修改下js文件。

好了今天的图片灯箱效果WordPress教程到此就竣事了有什么问题可以加入我们的WordPress交流群。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

一直被模仿,从未被超越!

常见问题
  • 本站所有源码都是通过互联网采集而来,不保证源码得完整性和可用性,如果介意请勿购买!
查看详情
  • 本站源码不提供任何服务帮助。本站只是提供源码,不提供服务帮助!
查看详情

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务