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 還允許使用者進行以下操作：縮放、平移、顯示/隱藏說明。在鍵盤上按下 Escape 鍵會關閉燈箱。

若要在燈箱中顯示圖片庫，另有 <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 屬性，則會顯示 ID 由 aria-describedby 屬性指定的元素內容作為標題。
<!-- 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

燈箱元素的 ID，會用來做為圖片 on 動作的目標。

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