背景
发现文章中的图片不能点击放大,图片中的小文字,看不清楚,影响展示效果。搜索得知需要使用 Lightbox,Lightbox 是什么?灯箱(Lightbox)是一个模态图片库,它通过创建全屏弹出窗口和使页面的其余部分变暗来显示您的图像和视频。
前言
- 如果没有特殊爱好,可以给图片添加链接,链接指向高清图片或者其它源站点链接。这样做,用户点击图片后,浏览器打开图片,不过需要用户点击返回才能回到文章页面。
- 所有的 lightbox,只是将图片的链接拦截,用户点击后,页面不跳转,直接在本页面小窗口打开图片链接。
- 本人喜欢 md 先写好文章,复制到 wordpress 中发表,导致了一堆问题,即便是 wordpress 直接编写,也没有给图片加链接的习惯,wordpress 支持给图片加链接,指向媒体库中的尺寸更大的图片,这样就是文章中使用缩略图,点击后展示大图。
- 这些插件与 Astra 主题,以及图片处理的七牛对象存储插件,不冲突。
灯箱组件测试
- Meow Lightbox
- 不能给图片加链接,页面至少有一张是图片库中的图片,否则不展示效果。这个也好解决,文章主题插入一张特色图(封面图)。
- 不能设置单张图片放大,会自动将整个文章中的图片做成合集。
- 会展示图片的 caption。
- 无额外组件加载。
- 不支持单图点击放大查看。
- Responsive Lightbox & Gallery
- 需要给图片加链接,不管这个链接指向其它图片,其它站点图片,媒体库中其它图片,这样的话,md 复制过来,文章中的图片需要设置一个链接,如果没有高清图,可以设置为图片本身;当然 md 语法格式,本身就支持给图片加链接和 title。比如这种格式:
- [![why Lightbox not working on New Posts](https://img.3lsh.cn/write-native/1672669302052.png)](https://img.3lsh.cn/write-native/1672669302052.png)
- Simple Lightobx,Easy FancyBox 等
- 需要给图片加链接,没链接无灯箱效果。
- 无过多灯箱样式。
- 会展示图片的 caption。
- 设置页面需要使用 xml_parser_create 函数,所以需要安装 php-xml 组件。
- 使用了 jQuery 组件。
- 不支持单图放大查看。
后记
- 搜索 simple lightbox 的 issues,找到了一个链接,说明了 Lightbox 不能用的原因,Lightbox not working on New Posts
- 在发现问题根源之前,经历各种灯箱插件测试,Simple Lightbox 打不开的原因查找,安装 php-xml,升级系统,文件夹权限等等各种问题,最终找的原因却很简单,图片没有加链接。
- 后续如果继续使用 md 编写后,再复制到 wordpress中,使用复杂的语法给图片加上链接。 选择了灯箱插件,Responsive Lightbox & Gallery,灯箱样式采用 FancyBox,同时给已经存在文章中的图片加上链接。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。