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

屬性

版面配置

必須設定為 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