">文档：<amp-lightbox-gallery> - amp.dev - AMP 框架
AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

amp-lightbox-gallery

实验性
Bento

描述

提供“灯箱”体验。在用户交互时，UI 组件会扩展以填充视口，直到用户关闭它。

 

必需脚本

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

用法

amp-lightbox-gallery 组件为 AMP 组件（例如 amp-img、amp-carousel）提供“灯箱”体验。当用户与 AMP 元素进行交互时，UI 组件会扩展以填充视口，直到用户将其关闭。目前，仅支持图片。

要使用 amp-lightbox-gallery，请确保在 <head> 部分中包含所需的脚本，然后在 <amp-img> 或 <amp-carousel> 元素上添加 lightbox 属性。

对于在灯箱中显示单个图片，还有 <amp-image-lightbox> 组件。要在灯箱中显示其他类型的元素，请使用 <amp-lightbox>。

使用 <amp-img> 显示灯箱

点击任何 <amp-img> 都会在灯箱库中打开图片。灯箱库会进行图片处理（例如缩放和平移），支持滑动以浏览图片，并提供缩略图库视图，以便在网格中浏览所有图片缩略图。

<amp-img src="cat.jpg" width="100" height="100" lightbox></amp-img>
<amp-img src="dog.jpg" width="100" height="100" lightbox></amp-img>
<amp-img src="bird.jpg" width="100" height="100" lightbox></amp-img>

使用 <amp-carousel> 显示灯箱

您可以在 <amp-carousel> 上添加 lightbox 属性，以对所有子项进行灯箱处理。目前，<amp-lightbox-gallery> 组件仅支持包含 <amp-img> 作为子项的轮播。当您在灯箱中浏览轮播项时，原始轮播幻灯片会同步，以便在关闭灯箱时，用户会回到他们最初所在的幻灯片上。目前，仅支持 type='slides' 轮播。

<amp-carousel
  lightbox
  width="1600"
  height="900"
  layout="responsive"
  type="slides"
>
  <amp-img src="image1" width="200" height="100"></amp-img>
  <amp-img src="image1" width="200" height="100"></amp-img>
  <amp-img src="image1" width="200" height="100"></amp-img>
</amp-carousel>

添加标题

您还可以选择为灯箱中的每个元素指定标题。<amp-lightbox-gallery> 会自动读取并显示这些字段，其优先级顺序如下

  • figcaption（如果灯箱元素是 figure 的子项）
  • aria-describedby
  • alt
  • aria-label
  • aria-labelledby

在以下示例中，<amp-lightbox-gallery> 将 figcaption 值显示为其描述，显示“多伦多的 CN 塔是 ....”。

<figure>
  <amp-img
    id="hero-img"
    lightbox="toronto"
    src="https://picsum.photos/1600/900?image=1075"
    layout="responsive"
    width="1600"
    height="900"
    alt="Picture of CN tower."
  >
  </amp-img>
  <figcaption class="image">
    Toronto's CN tower was built in 1976 and was the tallest free-standing
    structure until 2007.
  </figcaption>
</figure>

在以下示例中，<amp-lightbox-gallery> 将 alt 值显示为其描述，显示“CN 塔图片”。

<amp-img
  id="hero-img"
  lightbox="toronto"
  src="https://picsum.photos/1600/900?image=1075"
  layout="responsive"
  width="1600"
  height="900"
  alt="Picture of CN tower"
>
</amp-img>

实现缩略图预览

灯箱项具有缩略图库视图。您可以通过 lightbox-thumbnail-id 属性选择为您的灯箱元素指定缩略图项，该属性引用具有 layout="nodisplay" 的 <amp-img> 元素的 id。

<amp-youtube
  width="480"
  height="270"
  layout="responsive"
  data-videoid="lBTCB7yLs8Y"
  lightbox-thumbnail-id="my-thumbnail-img"
>
</amp-youtube>

<amp-img
  id="my-thumbnail-img"
  width="200"
  height="200"
  layout="nodisplay"
  src="https://picsum.photos/200/200?image=1074"
>
</amp-img>

如果没有指定缩略图，<amp-img> 元素将按 object-fit: cover 裁剪，<amp-video> 将使用其 poster 属性中指定的图像 src，并且带有一个占位图像的灯箱元素将使用该图像。

样式

你可以通过使用标准 CSS 定位 amp-lightbox-gallery-caption 类来设置 amp-lightbox-gallery 组件的标题样式。可以设置样式的一些属性包括 font-size 和 color。

操作

打开

打开灯箱图库。如果你指定了图像 id，则可以通过点击另一个元素来触发：on="tap:amp-lightbox-gallery.open(id='image-id')"。

分析

若要跟踪 amp-lightbox-gallery 的使用情况，请使用以下分析事件之一

lightboxOpened

此事件在用户点击灯箱 <amp-img> 时跟踪灯箱打开的情况。

你可以使用以下代码片段来跟踪此事件

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "open": "https://foo.com/open"
      },
      "triggers": {
        "trackLightboxOpened": {
          "on": "lightboxOpened",
          "request": "open"
        }
      }
    }
  </script>
</amp-analytics>

thumbnailsViewToggled

此事件在用户处于灯箱视图中时，通过点击触发器来触发缩略图视图时进行跟踪。

你可以使用以下代码片段来跟踪此事件

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "thumb": "https://foo.com/thumb"
      },
      "triggers": {
        "trackThumbnailsViewToggled": {
          "on": "thumbnailsViewToggled",
          "request": "thumb"
        }
      }
    }
  </script>
</amp-analytics>

descriptionOverflowToggled

此事件在用户点击说明以展开/折叠说明时跟踪用户切换说明的情况，从而跟踪对灯箱图像说明的参与度。

你可以使用以下代码片段来跟踪此事件

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "descOverflow": "https://foo.com/descOverflow"
      },
      "triggers": {
        "trackDescriptionOverflowed": {
          "on": "descriptionOverflowToggled",
          "request": "descOverflow"
        }
      }
    }
  </script>
</amp-analytics>

在有效的 AMP 文档外独立使用

Bento 允许你在非 AMP 页面中使用 AMP 组件，而无需完全遵守 AMP。你可以获取这些组件，并将它们放置在不支持 AMP 的框架和 CMS 中的实现中。在我们的指南 在非 AMP 页面中使用 AMP 组件 中阅读更多信息。

若要查找 amp-lightbox-gallery 的独立版本，请参阅 bento-lightbox-gallery。

验证

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

需要更多帮助吗？

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

转到 Stack Overflow
发现了一个错误或缺少一个功能？

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

前往 GitHub