回到所有的课程
课程库

Lightbox

使用lightbox组件在全屏显示媒体的模态中显示图像或视频。

本视频采用了旧的用户界面。更新版本即将到来!

Lightbox元素允许您在全屏幻灯片模式中显示图像(带或不带标题)或视频。它也适用于所有设备,使其轻松地在桌面、平板和移动屏幕上显示您的媒体。

在这节课中:
  1. 创建一个lightbox
  2. 添加lightbox媒体
  3. 使用灯箱组链接灯箱

创建一个lightbox

Lightbox图标缩略图

lightbox是一个可点击的缩略图,类似于图像元素,嵌套在链接块中。在实时网站上,点击链接边界内的链接将触发灯箱并显示与之相连的媒体。

添加一个Lightbox组件

本地lightbox组件内置了所有这些元素。要创建一个lightbox,您所需要做的就是使用Add面板中的lightbox组件。

左边的第一步,从组件部分选择lightbox元素并将其拖放到合适的位置。步骤二在右边,点击图像设置图标,点击“选择图像按钮”。
左边的第三步,从资产面板中选择所需的图像。步骤四在右边,预览放置在lightbox容器中的图像。

更新Lightbox缩略图

默认情况下,Lightbox链接包含一个图像元素。这个缩略图的行为与任何其他图像元素一样。您可以调整它的大小,双击它来替换它,并添加alt属性。了解关于图像元素的更多信息。

在左侧,通过单击并拖动图像框的右下角定位点,可以调整图像元素的大小。在右侧,图像设置包括一个被称为Alt Text的高亮区域,在左侧有对图像的自定义描述。alt文本以“灰色的混凝土道路期间……”开始。

您可以对缩略图和大图使用相同的图像Lightbox滑块视图。Webflow自动为所有内联图像创建响应式变体。了解更多关于响应的图像

同样的图片有六种不同的尺寸。为了演示图像的响应性,不同尺寸的显示分别为原始、2000px、1600px、1080px、800px和500px。
响应式图像功能为您的项目中的所有图像创建大小变化。

使用其他内容而不是Lightbox缩略图

还可以删除默认的图像元素,并拖放其他内容,如标题,或任何其他非链接元素Lightbox链接

你也可以用aDiv块并应用背景图像来创建大小相同的图像缩略图。

一个灯箱链接包括旧金山Sutro浴场的图片。包括H1标题和段落文本。H1文本是Sutro Baths。这段文字是旧金山,加州。

风格的lightbox

您可以设置lightbox链接及其内容的样式。例如,如果您在lightbox链接中添加文本元素,您可以设置lightbox link元素的排版样式来覆盖默认的链接排版样式。

至于lightbox本身,当你点击lightbox链接时打开的模态是不可定制的。这意味着,您无法自定义背景叠加、图像和标题。如果您需要一个完全可定制的灯箱,您可以使用的相互作用创建一个。

添加lightbox媒体

在构建好lightbox链接及其内容的结构和样式之后,您可以选择触发lightbox时要显示的媒体(图像或视频)。你可以在Lightbox中找到的设置元素设置面板。

lightbox设置面板包括一个添加图片的按钮,一个添加视频的按钮,一个已经添加的图片的名称和缩略图,在右侧有一个删除图标。还有一个用于链接其他lightbox的复选框。

添加图片

要添加图像,选择lightbox,然后点击元素设置面板上的图像图标→lightbox设置。然后从资产面板中选择一个图像或上传一个。

通过相同的过程添加任意数量的图像。

在左边的第一步,单击lightbox设置面板中的图像图标。在右边的第二步,点击“选择图像”按钮,然后从资产面板中选择图像。

添加视频

要添加视频,选择灯箱,点击元素设置面板中的视频图标→灯箱设置。然后,从YouTube或Vimeo等第三方网站粘贴视频链接。

添加图片说明

如果您选择图像作为媒体,您可以选择添加标题。图片的标题将直接出现在图片的下方。

左边的第一步,在添加图像弹出菜单的标题输入字段中输入标题文本。在右边的第二步,预览添加的lightbox图像的左下角的标题。

从收藏中获取媒体

您可以通过获取占位符图像以及lightbox媒体从媒体集合字段(图像领域多映像领域,或视频领域)或电子商务收藏。

  1. 在集合列表或集合页面中添加一个lightbox
  2. 选择占位符图像
  3. 在Image设置中,选择从Image字段获取图像
  4. Lightbox设置时,可以选择从相同的图像字段或视频字段获取媒体
左边的第一步,选择图像缩略图占位符。步骤二在右侧的图像设置面板下,从集合列表的“获取图像”菜单中选择主图像选项。
步骤三在左侧,选择灯箱链接元素。第四步,在右边的Lightbox设置面板中的集合列表“get media from”下拉菜单中选择主图像选项。
已将五个灯箱元素添加到集合列表中。这些图像是通过从集合列表中获取媒体特性添加的。

将灯箱连接到多图像域:

  1. 在“收集”页面添加“收集”列表
  2. 将收集列表连接到多图像字段
  3. 在图像设置中,选择从多图像字段获取图像
  4. 在Lightbox设置中,您可以选择从多图像字段获取媒体

了解更多关于多图像领域

使用Lightbox组链接Lightbox

您可以将多个灯箱链接在一起以创建一个幻灯片库。点击链接灯箱将打开与链接组相关的所有媒体。

创建Lightbox组

  1. 选择lightbox中的任何元素
  2. 在元素设置面板中启用“与其他灯箱链接”→灯箱设置
  3. 输入组名
灯箱设置面板包括添加图像图标、添加视频图标、文件名和带有删除图标的缩略图、“与其他灯箱链接”复选框和名为“2021 Road trip”的组名。

将其他灯箱链接到同一组

要链接lightbox,请对想要链接到组的每个lightbox重复上述步骤,并输入组名。

一个包含4张图片的灯箱组正在展示旧金山Sutro浴场的图片。还有一个标题写着“旧金山Sutro浴场”

对于集合列表中的灯箱,在集合项中创建并链接一个灯箱会自动链接到集合列表中的所有灯箱。

灯箱设置面板包括一个复选框,用于“从产品获取媒体”获取主图像,一个复选框用于链接其他灯箱和一个名为2021 Road trip的组名。欧宝体育在线首页

在一个页面上创建多个Lightbox组

如果在同一个页面上有多个灯箱,您可以通过为每个灯箱组分配不同的名称来分隔它们。

尝试Webflow——它是免费的
Baidu
map