自定义Lightbox - 现代设计、滑动手势、全屏模式等

|||
|-|-|-|
| :eyeglasses: |预览| Theme Creator |
| :hammer_and_wrench:|存储库| GitHub - VaperinaDEV/discourse-custom-lightbox |
| :question:|安装指南|如何安装主题或主题组件|
| :open_book:|不熟悉 Discourse 主题?| Discourse 主题使用入门指南

你好 :wave:

此主题组件将修改 magnific popup(灯箱/画廊),使其更加用户友好,尤其是在移动设备上。


此组件将对默认的 magnific popup 进行大量更改。

  • 更现代的设计
  • 全屏按钮(快捷键 F
  • 显示/隐藏标题按钮
  • 触摸滑动操作
    • 向右滑动 - 上一张图片
    • 向左滑动 - 下一张图片
    • 向下滑动 - 关闭灯箱

主题翻译以更改按钮标题。

zoom_in_button_title: "Zoom In"
zoom_out_button_title: "Zoom Out"
close_button_title: "Close (Esc)"
fullscreen_button_title: "Fullscreen mode (F)"
toggle_title_button_title: "Toggle Info"

这个新的自定义灯箱,灵感来自 New Discourse Lightbox Enabled on Meta - now disabled


仍然想使用旧版本?
您可以通过 old-custom-lightbox 分支使用。

15 个赞

如果可以通过左右滑动来滚动就太好了。除此之外,tc 很棒。

3 个赞

谢谢!是的,那会很棒,但不幸的是 Magnific Popup 不支持滑动操作。

4 个赞

我已经更新了主题组件和 OP。

4 个赞

你好 :wave:

我已经更新了这个主题组件 :tada:

此次更新包含以下内容:

  1. 移除 jQuery
  2. 在灯箱打开时将主题颜色更改为黑色。(例如,状态栏也会像灯箱背景一样变为黑色)
  3. 更新至 FontAwesome 6 图标。
  4. 在图片上使用放大和缩小光标。

我已将预览链接添加到 OP。 :slightly_smiling_face:

5 个赞

非常感谢唐先生,您能否添加一个选项,将箭头、下载按钮和图片计数移到图片外部?在摄影网站上,遮挡部分照片是不好的,我们希望看到完整的照片,不受干扰。如果不行也没关系,谢谢!

2 个赞

谢谢 David,我会研究解决方案的 :slightly_smiling_face:
这个想法是创建一个新的信息按钮来显示/隐藏图像信息,例如下载、原始图像、标题和计数器等。:thinking:

1 个赞

谢谢 Don,我当时想的是这样的:

但也要把箭头移到图片外面,这需要缩小图片,在边缘留出一些填充空间。

另一种选择是隐藏所有信息,直到光标移动,不知道是否可行。

2 个赞

我从新的灯箱布局中获得了一些灵感,并制作了一个概念图 :sweat_smile:

我认为这样的设计可能有效。


  1. 简化按钮,更改位置,使用更小的箭头
  2. 添加全屏按钮和信息按钮以显示底部信息
1 个赞

太棒了!希望你能成功 :crossed_fingers:t3:

2 个赞

此主题组件的更新::tada: 尚未合并,但您可以在 Theme Creator 上试用其功能。

更改如我在 Custom Lightbox - modern, swipe gestures, fullscreen mode and more - #9 by Don 帖子中所述。

  1. 全屏按钮(您也可以按 F 键触发)
  2. 显示/隐藏标题按钮
  3. 仅在缩放时显示缩小图标。
  4. 在移动设备上隐藏箭头
  5. 还添加了触摸滑动操作,使其在触摸屏设备上使用更舒适。
    • 向右滑动 - 上一张图片
    • 向左滑动 - 下一张图片
    • 向下滑动 - 关闭灯箱
  6. 一些用户体验调整

此更新还将删除设置。

2 个赞

看起来不错,Don!我唯一看到的问题是,当我点击上一张/下一张箭头时,它会关闭灯箱,如果你使用键盘箭头,它会按预期工作。我尝试了各种浏览器,结果都一样。

2 个赞

谢谢,我现在已经修复了。你能检查一下吗?

1 个赞

现在可以了!

2 个赞

你好 :wave:

我已经合并了新的自定义灯箱 :tada:

也更新了 OP…

4 个赞

你好 :wave:

我为触摸设备合并了一项缺失的功能:FEATURE: Change image click behaviour to toggle zoom on touchscreen · VaperinaDEV/discourse-custom-lightbox@7d588e2 · GitHub

图像导航现在支持滑动操作,因此我们可以使用图像单击来切换放大/缩小。

2 个赞

您好 :wave:

这是一个新更新! :tada:

此更新包括几项设计改进:

  • 移除了灯箱周围的填充
  • 小型图片现在也可以缩放了
  • 新的按钮设计,带有透明黑色背景,使按钮在浅色图片上也能显示等。

Screenshot 2025-05-14 at 9.00.45


桌面增强功能:

在桌面上缩放图片滚动,尤其是水平滚动,并不容易或用户友好。
本次更新引入了光标跟随滚动机制以改善体验。


2 个赞