AMP
繁體中文
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 值作為其說明，顯示「Toront's CN tower was ....」。

<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 值作為其說明，顯示「Picture of CN tower」。

<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