使用wordpress建图片站的站长可以说非常多的，zibll子比主题是一款多功能的阅读类主题，说到阅读，那肯定少不了图片。如何让图片布局灵活、漂亮！又如何让用户易于图片浏览、图片操作，这些都是子比主题重要的开发项目，越是看似简单的时候，我们越会做的认真。
首先主题才用模块化布局，同时文章也基于wordpress的古腾堡编辑器才用模块化编辑文章，那么使用子比主题就能很轻松的用模块的方式将图片添加到您的网站。
特别是在文章中插入图片，不急支持最基础的图片插入，还支持多宫格布局，图片蒙版，图片幻灯片，图片异步加载等功能，方便每一位站长简单轻松的实现漂亮的文章图片插入！
将文章中的图片布局完成之后，我们需要考虑的就是用户查看图片的体验如何？所以子比主题开发了强大的图片灯箱功能，点击图片即可弹出图片灯箱查看原图，支持缩放、切换等功能，整个过程行如流水、丝丝顺滑！
本文部分功能需升级zibll子比主题V5.3及以上版本！
特色简介
本篇教程我们主要讲解图片灯箱功能，这个功能很简单，仅仅是点击图片即可，那么我们首先介绍一下子比主题的图片灯箱有哪些特点：
- 两种模式可设置：单图模式和幻灯片模式
- 支持缩略图导航功能
- 支持下载原图功能
- 支持自动播放功能
- 支持双击放大、缩小
- 支持下滑关闭
- 支持移动端双指触摸放大、缩小
- 支持键盘左右键切换图片
- 采用硬件加速的动画引擎，整个切换、缩放过程丝丝顺滑
- 未使用第三方JS插件，自行开发仅6KB大小文件
- 对应的js文件动态按需加载
- 灯箱内图片自动获取原图且异步加载，有效提高页面加载速度
选项配置
此功能建议保持默认即可，如需配置可以进入：
![图片[1]-wordpress主题zibll子比主题丝丝顺滑的文章图片灯箱-点击查看原图-功能详解](https://oss.zibll.com/zibll.com/2021/04/图片-3.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_507)
配置项目十分简单，根据选项按需配置即可
功能体验
那么我们简单的放几张图片供大家体验一下，记得要分别在PC端和移动端都体验喔！
![图片[2]-wordpress主题zibll子比主题丝丝顺滑的文章图片灯箱-点击查看原图-功能详解](https://oss.zibll.com/zibll.com/2021/04/美女-1.jpeg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_640)
![图片[3]-wordpress主题zibll子比主题丝丝顺滑的文章图片灯箱-点击查看原图-功能详解](https://oss.zibll.com/zibll.com/2021/04/美女-8.jpeg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_640)
![图片[4]-wordpress主题zibll子比主题丝丝顺滑的文章图片灯箱-点击查看原图-功能详解](https://oss.zibll.com/zibll.com/2021/04/美女-10.jpeg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_640)
![图片[5]-wordpress主题zibll子比主题丝丝顺滑的文章图片灯箱-点击查看原图-功能详解](https://oss.zibll.com/zibll.com/2021/04/美女-4.jpeg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_640)
![图片[6]-wordpress主题zibll子比主题丝丝顺滑的文章图片灯箱-点击查看原图-功能详解](https://oss.zibll.com/zibll.com/2021/04/美女-3.jpeg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_640)
![图片[7]-wordpress主题zibll子比主题丝丝顺滑的文章图片灯箱-点击查看原图-功能详解](https://oss.zibll.com/zibll.com/2021/04/美女-2.jpeg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_640)
![图片[8]-wordpress主题zibll子比主题丝丝顺滑的文章图片灯箱-点击查看原图-功能详解](https://oss.zibll.com/zibll.com/2021/04/美女-12.jpeg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_640)
![图片[9]-wordpress主题zibll子比主题丝丝顺滑的文章图片灯箱-点击查看原图-功能详解](https://oss.zibll.com/zibll.com/2021/04/美女-11.jpeg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_640)
![图片[10]-wordpress主题zibll子比主题丝丝顺滑的文章图片灯箱-点击查看原图-功能详解](https://oss.zibll.com/zibll.com/2021/04/美女-13.jpeg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_640)
扩展阅读
如需了解主题与图片相关的功能，你可能需要查看以下文章：
© 版权声明
分享是一种美德，转载请保留原链接
THE END
![付费阅读、付费资源、付费图库、付费视频等商城功能详解[图文教程]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/支付功能-列表图.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_700,h_490)
![子比主题官方推广计划正式上线，推广可获高额奖励[限时推广]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/11/推广计划.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_429,h_300)
![Zibll子比主题-最新版V8.0已更新[2024-10-15][更新日志]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/更新日志.jpg)
![接入百度API内容审核并开启免人工审核功能详细教程[V6新功能]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2021/12/api内容审核-列表图.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_700,h_490)
![使用微信JSSDK分享实现微信分享有图的配置教程[微信分享有图]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2022/04/微信分享.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_700,h_490)
![zibll子比主题评论和用户主页显示IP归属地功能配置教程[V7.2新功能]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2023/05/ip归属地-列表图1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_700,h_490)
![在线更新教程、升级教程、常见问题解答[优雅的升级体验]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/12/在线更新-列表图.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_700,h_490)
- 最新
- 最热
只看作者