因本博客文章的特点,导致本博文章中经常插入大量图片。若每张照片都独立的插入文章中,有时会显得不太美观,也不利于排版。还好WP自带一个相册功能,可以将多张图片插入为一个相册,以缩略图或其他尺寸的形式展示它们。
WP自带相册生成的前台页面只能链接到源文件或媒体文件页面,这看起来并不优雅。我写了个小插件,使得点击相册图片时弹出一个灯箱,并在灯箱中展示完整图片。

插件预览(点击图片试试看吧)

点击上面的图片弹出灯箱,鼠标悬浮灯箱图片会有左右翻页按钮。
或者访问相册效果预览页面

插件下载

Github-WP-Gallery-LightBox

原理

插件原理:替换相册短代码处理函数,在输出内容中加入LightBox.js的相关代码。
具体代码及原理请见本站文章:从零开始写一款WordPress插件-以改造原生相册为例

使用方法

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

常见问题

  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】おくさまが生徒会長! 动画片截图

我来吐槽

*

*

6位绅士参与评论

  1. joe11-16 16:30 回复

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

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

    nice,很完美,感谢博主

  3. hk07-04 14:13 回复

    划水

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

    呜哇 你什么时候来typecho

  5. c0sMx07-02 09:20 回复

    支持!