AMP
EN
德语 法语 阿拉伯语 西班牙语 意大利语 印尼语 日语 韩语 葡萄牙语 俄语 土耳其语 中文 波兰语 越南语

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