
因本博客文章的特点,导致本博文章中经常插入大量图片。若每张照片都独立的插入文章中,有时会显得不太美观,也不利于排版。还好WP自带一个相册功能,可以将多张图片插入为一个相册,以缩略图或其他尺寸的形式展示它们。
WP自带相册生成的前台页面只能链接到源文件或媒体文件页面,这看起来并不优雅。我写了个小插件,使得点击相册图片时弹出一个灯箱,并在灯箱中展示完整图片。
插件预览(点击图片试试看吧)
点击上面的图片弹出灯箱,鼠标悬浮灯箱图片会有左右翻页按钮。
或者访问相册效果预览页面。
插件下载
Github-WP-Gallery-LightBox
更新日志
- v1.0.4 修复重复加载JS\CSS的Bug,禁用动画未播放完成时切换(2019-1-13)
- v1.0.3 剔除不合规定的JQuery引入
- v1.0.2 添加后台设置页面
- v1.0.1 替换插件为依赖JQuery的新版本,修改插件代码,使得效果与老版本一致
- v1.0.0 初次上传
原理
插件原理:替换相册短代码处理函数,在输出内容中加入LightBox.js的相关代码。
具体代码及原理请见本站文章:从零开始写一款WordPress插件-以改造原生相册为例。
使用方法
- 下载插件,打包zip,上传启用之。
- 编辑文章或页面时选择左上角添加媒体->创建相册。
- 选择你喜欢的图像(多选),后点击左下角创建新相册,进入相册设置页面。
- 在右上角设置相册尺寸,并将链接到选项修改为媒体文件(重要)。
- 点击插入相册,即可在文章中加入相册短代码。
- 返回前台预览效果。
帮助
如需帮助,可加入梓喵出没博客交流群,群号:313732000
点击链接加入群聊:https://jq.qq.com/?_wv=1027&k=5GXKmKy
常见问题
- 点击图片后会跳转到图片url
检查是否引入了JQuery库,如无则引入。而后检查前台输出内容是否正常。 - 相册尺寸为缩略图,前台输出的相册尺寸参差不齐
前台相册尺寸和WP后台设置的缩略图裁切尺寸有关。 - 是否支持非相册的普通图片
不支持。本博的灯箱功能只用作相册展示,所以我没写。 - 适用的WordPress版本
WordPress4.7.x已测,其余版本未测。
第三方内容
- LightBox2.js@MIT协议,本博修改了其动画效果。
- 梦月酱PureLove主题后台设置界面样式。
- wp-includes/media.php@GPL协议,拷贝并修改相册处理源函数。
引用资料
1、[相册]【SEVEN】おくさまが生徒会長! 动画片截图