因本博客文章的特点,导致本博文章中经常插入大量图片。若每张照片都独立的插入文章中,有时会显得不太美观,也不利于排版。还好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插件-以改造原生相册为例

使用方法

  1. 下载插件,打包zip,上传启用之。
  2. 编辑文章或页面时选择左上角添加媒体->创建相册。
  3. 选择你喜欢的图像(多选),后点击左下角创建新相册,进入相册设置页面。
  4. 在右上角设置相册尺寸,并将链接到选项修改为媒体文件(重要)。
  5. 点击插入相册,即可在文章中加入相册短代码。
  6. 返回前台预览效果。

帮助

如需帮助,可加入梓喵出没博客交流群,群号:313732000
点击链接加入群聊:https://jq.qq.com/?_wv=1027&k=5GXKmKy

常见问题

  1. 点击图片后会跳转到图片url
    检查是否引入了JQuery库,如无则引入。而后检查前台输出内容是否正常。
  2. 相册尺寸为缩略图,前台输出的相册尺寸参差不齐
    前台相册尺寸和WP后台设置的缩略图裁切尺寸有关。
  3. 是否支持非相册的普通图片
    不支持。本博的灯箱功能只用作相册展示,所以我没写。
  4. 适用的WordPress版本
    WordPress4.7.x已测,其余版本未测。

第三方内容

  1. LightBox2.js@MIT协议,本博修改了其动画效果。
  2. 梦月酱PureLove主题后台设置界面样式。
  3. wp-includes/media.php@GPL协议,拷贝并修改相册处理源函数。

引用资料

1、[相册]【SEVEN】おくさまが生徒会長! 动画片截图

我来吐槽

*

*

9位绅士参与评论

  1. 秋之礼07-12 19:30 回复

    在WordPress 5.2.2,提示:PHP Notice: Undefined index: gallery-lightbox-save-nonce in ..\wp-content\plugins\WP-Gallery-LightBox-Plus\zm_gallery_light_admin.php on line 26,请问原因,谢谢!

    • 野兔07-13 01:15 回复

      此问题已被修复,请从github下载最新内容。

      • 秋之礼07-13 11:26 回复

        更新后未定义的问题已解决,另外似乎在WP 5.2.2不再使用gallery_shortcode了,因为即使原生的gallery短码也没有log输出呢,谢谢!

        • 野兔07-13 11:30

          请检查是否引入了JQuery,测试可用。

  2. 小象04-19 23:38 回复

    在哪里下载?

  3. joe11-16 16:30 回复

    好看多了
    能否增加一个翻页功能 就是图片多的时候分页显示

  4. 代号1807-20 14:51 回复

    nice,很完美,感谢博主

  5. hk07-04 14:13 回复

    划水

  6. 北海07-02 21:23 回复

    呜哇 你什么时候来typecho

  7. c0sMx07-02 09:20 回复

    支持!