amp-image-lightbox

描述

为指定图片提供灯箱效果。

所需脚本

<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>

支持的布局

nodisplay

示例

amp-image-lightbox 产品页面

用法

amp-image-lightbox 组件为指定图片提供灯箱体验。当用户点击图片时，图片会显示在全视口灯箱的中央。

<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>
<amp-img
  on="tap:lightbox1"
  role="button"
  tabindex="0"
  src="image1.jpg"
  width="200"
  height="100"
></amp-img>

当用户点击图片时，<amp-img> 通过 on 操作激活 <amp-image-lightbox>，该操作引用 <amp-image-lightbox> 元素的 ID（即 lightbox1）。然后，<amp-image-lightbox> 将图片显示在全视口灯箱的中央。请注意，amp-image-lightbox 元素本身必须为空，并且必须设置为 layout=nodisplay。

除了其他内容外，amp-image-lightbox 还允许用户进行以下操作：缩放、平移、显示/隐藏描述。按键盘上的 ESC 键可关闭灯箱。

要在灯箱中显示图片库，还可以使用 <amp-lightbox-gallery> 组件。要在灯箱中显示其他类型的元素，请使用 <amp-lightbox>。

您可以在 AMP 页面上为多张图片使用同一个 amp-image-lightbox。

在此示例中，显示了两张图片：一只猫和一只青蛙。当用户点击任一图片时，图片会显示在灯箱中。

<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>

<amp-img
  on="tap:lightbox1"
  role="button"
  tabindex="0"
  src="/img/frog.jpg"
  layout="responsive"
  width="360"
  height="360"
></amp-img>

<amp-img
  on="tap:lightbox1"
  role="button"
  tabindex="0"
  src="/img/cat.jpg"
  layout="responsive"
  width="360"
  height="360"
></amp-img>

添加标题

您还可以选择在视口的底部为图片显示标题。<amp-image-lightbox> 组件确定标题的内容，如下所示

如果图片位于 figure 标签中，则 <figcaption> 的内容将显示为标题。
如果图片指定了 aria-describedby 属性，则由 aria-describedby 属性指定的元素的内容将显示为标题。

<!-- Captions via figcaption -->
<figure>
  <amp-img
    on="tap:lightbox1"
    role="button"
    tabindex="0"
    src="dog.jpg"
    layout="responsive"
    width="300"
    height="246"
  ></amp-img>
  <figcaption>Border Collie</figcaption>
</figure>

<!-- Captions via aria-describedby -->
<div>
  <amp-img
    on="tap:lightbox1"
    role="button"
    tabindex="0"
    src="dog.jpg"
    aria-describedby="imageDescription"
    layout="responsive"
    width="300"
    height="246"
  ></amp-img>
  <div id="imageDescription">This is a border collie.</div>
</div>

属性

`布局`

必须设置为 nodisplay。

`ID`

用作图像 on 操作目标的灯箱元素的 ID。

`data-close-button-aria-label`（可选）

可用于关闭按钮的 ARIA 标签。

操作

`open`（默认）

打开图像灯箱，其中源图像触发操作。

样式

可以使用标准 CSS 设置 amp-image-lightbox 组件的样式。可以设置样式的属性包括 background 和 color。amp-image-lightbox-caption 类也可用于设置标题部分的样式。

验证

请参阅 AMP 验证器规范中的 amp-image-lightbox 规则。

需要更多帮助？

你已经阅读了本文档十多次，但它并没有真正涵盖你所有的问题？也许其他人也有同感：在 Stack Overflow 上联系他们。

转到 Stack Overflow

发现了一个错误或缺少功能？

AMP 项目强烈鼓励你的参与和贡献！我们希望你成为我们开源社区的持续参与者，但我们也欢迎针对你特别热衷的问题进行一次性贡献。

转到 GitHub