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

amp-image-lightbox

說明

為指定的圖片提供lightbox效果。

 

必要指令碼

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

支援的版面配置

用法

amp-image-lightbox 元件為指定的圖片提供 lightbox 體驗。當使用者點擊圖片時，圖片會顯示在全螢幕 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> 會在全螢幕 lightbox 的中央顯示圖片。請注意，amp-image-lightbox 元素本身必須是空的，且必須設定為 layout=nodisplay。

amp-image-lightbox 除了其他功能外，還允許使用者進行以下操作：縮放、平移、顯示/隱藏說明。按下鍵盤上的 Esc 鍵會關閉 lightbox。

若要在 lightbox 中顯示圖片庫，還有 <amp-lightbox-gallery> 元件。若要在 lightbox 中顯示其他類型的元素，請使用 <amp-lightbox>。

對多張圖片使用單一lightbox

您可以在 AMP 頁面上將同一個 amp-image-lightbox 用於多張圖片。

在此範例中，會顯示兩張圖片：貓和青蛙。當使用者點擊任一張圖片時，圖片會顯示在 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>

新增標題

您可以選擇性地在圖片的 viewport 底部顯示標題。<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

lightbox 元素的 ID，用作圖片 on 動作的目標。

data-close-button-aria-label (選填)

您可以用於關閉按鈕的 ARIA 標籤。

動作

open (預設)

開啟圖片 lightbox，來源圖片為觸發動作的圖片。

樣式

您可以使用標準 CSS 為 amp-image-lightbox 元件設定樣式。可以設定樣式的一些屬性包括 background 和 color。amp-image-lightbox-caption 類別也可用於設定標題區段的樣式。

驗證

請參閱 AMP 驗證器規格中的 amp-image-lightbox 規則。

需要更多協助嗎？

您已經讀過這份文件十幾次，但它仍然沒有涵蓋您的所有問題？也許其他人也有同感：請在 Stack Overflow 上與他們聯繫。

前往 Stack Overflow
發現錯誤或缺少功能？

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

前往 GitHub