範例：<amp-image-lightbox> - amp.dev

amp-image-lightbox
- 簡介設定基本用法多圖片支援標題：figcaption 標題：aria-describedby

網站

簡介

amp-image-lightbox 元件允許使用者展開圖片以填滿視窗。

設定

在標頭中匯入 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-img 元素上的 on 動作啟動，並參照燈箱元素的 ID。

<amp-img on="tap:lightbox1" role="button" tabindex="0" src="/static/samples/img/Border_Collie.jpg" alt="Picture of a dog" title="Picture of a dog, view in lightbox" layout="responsive" width="300" height="246"></amp-img>
<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>

多圖片支援

甚至可以在同一個 amp-image-lightbox 中顯示不同的圖片。以下是另一張使用相同燈箱的圖片。

<amp-img on="tap:lightbox1" role="button" tabindex="0" src="/static/samples/img/Hovawart.jpg" alt="Picture of a dog" title="Picture of a dog, view in lightbox" layout="responsive" width="600" height="400"></amp-img>

標題：figcaption

amp-image-lightbox 也可以選擇性地在視窗底部顯示圖片的標題。標題可以是圖片位於 figure 標籤中時，<figcaption> 元素的內容...

邊境牧羊犬。

<figure>
  <amp-img on="tap:lightbox1" role="button" tabindex="0" src="/static/samples/img/Border_Collie.jpg" alt="Picture of a dog" title="Picture of a dog, view in lightbox" layout="responsive" width="300" height="246"></amp-img>
  <figcaption>Border Collie.</figcaption>
</figure>

標題：aria-describedby

... 或是 ID 由圖片的 aria-describedby 屬性指定的元素內容。

這是一隻邊境牧羊犬。

<amp-img on="tap:lightbox1" role="button" tabindex="0" aria-describedby="imageDescription" alt="Picture of a dog" title="Picture of a dog, view in lightbox" src="/static/samples/img/Border_Collie.jpg" width="300" height="246"></amp-img>
<div id="imageDescription">
  This is a border collie.
</div>

需要更多說明嗎？

如果本頁的說明沒有涵蓋您的所有問題，歡迎聯絡其他 AMP 使用者，討論您的具體使用案例。

前往 Stack Overflow

未說明的特色功能？

AMP 專案非常鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別熱衷的問題提供一次性的貢獻。

在 GitHub 上編輯範例

作者 @sebastianbenz