AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

amp-image-lightbox

描述

为指定的图像提供灯箱效果。

 

必需的脚本

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

支持的布局

用法

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> 组件按如下方式确定标题的内容

  1. 如果图像在 figure 标签中，则 <figcaption> 的内容将显示为标题。
  2. 如果图像指定了 aria-describedby 属性，则 aria-describedby 属性指定的 ID 的元素内容将显示为标题。
<!-- 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>

属性

layout

必须设置为 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