Lightbox - Webflow 帮助
使用 lightbox 元素在全屏模态窗口中显示图像或视频。
如何创建 lightbox
lightbox 是嵌套在链接块中的可点击缩略图。当网站访问者在实时网站上点击链接的边界内时，lightbox 会打开以显示与之连接的媒体。您可以从 添加面板 > 高级 中添加 lightbox。
lightbox 占位符缩略图的工作原理
lightbox 包含一个图像元素，其行为与其他图像元素相同。您可以调整其大小，双击以替换占位符缩略图，并添加替代文本。了解更多关于图像元素的信息。
您可以为 lightbox 缩略图和较大的 lightbox 模态窗口使用相同的图像。Webflow 会自动为所有内联图像创建响应式变体。了解更多关于响应式图像的信息。
如何用其他内容替换 lightbox 缩略图
您可以替换占位符图像元素，并拖放其他内容（例如标题或任何其他非链接元素）到 lightbox 链接 内。
您还可以使用 div 块 并应用背景图像来创建等大小的图像缩略图。
如何设置 lightbox 的样式
您可以为灯箱链接及其内容设置样式。例如，如果在灯箱链接中嵌套文本元素，您可以设置灯箱链接元素的排版样式。
如何添加灯箱媒体
要向灯箱模态窗口添加图像和说明：
- 在画布上选择灯箱链接
- 转到元素设置面板 > 灯箱链接设置 > 媒体
- 点击“添加列表项”图标
- 选择“图像”作为类型
- 点击替换图像
- 从资产面板中选择一张图像
- 如有需要，添加说明
您可以根据需要向灯箱链接添加任意数量的图像。这些图像将在灯箱模态窗口内以幻灯片形式显示。
要向灯箱模态窗口添加视频：
- 在画布上选择灯箱链接
- 转到元素设置面板 > 灯箱链接设置 > 媒体
- 点击“添加列表项”图标
- 选择“视频”作为类型
- 在URL字段中添加视频的URL
- 如有需要，添加标题
灯箱用于图像和视频 - 网页设计教程
如何从集合字段媒体创建动态灯箱
您可以通过从媒体集合字段（即图像字段、多图像字段或视频字段）中提取缩略图和/或灯箱媒体来创建动态灯箱。
要将动态集合字段连接到灯箱缩略图：
- 将灯箱添加到动态连接的集合列表或CMS集合页面
- 选择占位符缩略图
- 转到元素设置 > 图像设置
- 点击图像字段中的“紫色点”图标
- 选择一个图像集合字段
然后，您可以将灯箱连接到集合字段，这样您的动态集合图像就可以在灯箱中使用。要将动态集合字段连接到灯箱媒体：
- 选择灯箱链接
- 前往元素设置 > 灯箱链接设置
- 点击媒体字段中的“紫色点”图标
- 选择一个媒体集合字段
要将灯箱连接到多图像字段：
- 在集合页面添加一个集合列表
- 通过点击来源下拉菜单并选择多图像字段，将集合列表连接到多图像字段
- 在集合列表中添加一个灯箱
- 选择灯箱中的图像元素
- 前往元素设置 > 图像设置
- 点击图像字段中的“紫色点”图标
- 选择多图像字段
- 在画布上选择灯箱链接
- 前往元素设置 > 灯箱链接设置
- 点击媒体字段中的“紫色点”图标
- 选择多图像字段
当灯箱添加到集合列表或集合页面时，您也可以将灯箱连接到多图像字段。
如何使用灯箱组链接灯箱
您可以将多个灯箱链接在一起以创建幻灯片画廊。当网站访问者点击一个链接的灯箱时，灯箱将打开与该链接组相关的所有媒体。
如何创建灯箱组
- 选择灯箱中的任意元素
- 前往元素设置 > 灯箱设置
- 在匹配或创建组名字段中输入组名
使用相同组名的灯箱会被链接在一个组中。
对于集合列表中的灯箱，在集合项中创建并链接一个灯箱会自动链接集合列表中的所有灯箱。
在页面上创建多个灯箱组
如果同一页面上有多个灯箱，您可以通过为每个灯箱组分配不同的组名来将它们分开。