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

amp-lightbox-gallery
- 簡介設定基本用法搭配 amp-carousel Lightbox 群組標題

網站

簡介

<amp-lightbox-gallery> 元件為 AMP 元件（例如 amp-img、amp-carousel）提供「lightbox」體驗。當使用者與 AMP 元素互動時，UI 元件會展開以填滿視窗，直到使用者關閉為止。目前僅支援圖片。

設定

在標頭中匯入 amp-lightbox-gallery 元件。

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

如果您將 lightbox 與輪播搭配使用，可選擇性地在標頭中匯入 amp-carousel 元件。

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

基本用法

這是一個基本範例，示範了 lightbox 化的 <amp-img>。您的頁面有一個或多個 <amp-img> 元素。只需將「lightbox」屬性新增至您希望在 lightbox 中檢視的每個圖片。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<amp-img lightbox src="/static/samples/img/road-1.jpg" width="300" height="200" layout="responsive"></amp-img>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<amp-img lightbox src="/static/samples/img/road-2.jpg" width="300" height="200" layout="responsive"></amp-img>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<amp-img lightbox src="/static/samples/img/road-3.jpg" width="300" height="200" layout="responsive"></amp-img>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

搭配 amp-carousel

您也可以將 <amp-lightbox-gallery> 與 <amp-carousel> 搭配使用，以在 lightbox 中檢視輪播的內容。只需加入包含 <amp-img> 的 <amp-carousel>，並將「lightbox」屬性新增至 <amp-carousel> 即可。lightbox 圖片將與輪播滑動同步。

<amp-carousel lightbox width="400" height="300" layout="responsive" type="slides">
  <amp-img src="/static/samples/img/image1.jpg" width="400" height="300" layout="responsive"></amp-img>
  <amp-img src="/static/samples/img/image2.jpg" width="400" height="300" layout="responsive"></amp-img>
  <amp-img src="/static/samples/img/image3.jpg" width="400" height="300" layout="responsive"></amp-img>
</amp-carousel>

預設情況下，除非 lightbox 元素屬於輪播，否則所有 lightbox 元素都會分組到同一個 lightbox 中。同一個 lightbox 輪播中的所有元素都屬於同一個 lightbox。您可以將 lightbox 屬性設定為唯一字串來覆寫此行為。一種常見模式是讓一張英雄圖片開啟成包含多張圖片的 lightbox 圖庫。

查看照片圖庫

  <amp-img lightbox="hero" src="/static/samples/img/clean-2.jpg" width="400" height="300" layout="responsive">
    <span class="overlay-text">See photo gallery</span>
  </amp-img>
<div hidden>
  <amp-img lightbox="hero" src="/static/samples/img/clean-1.jpg" layout="responsive" width="400" height="710"></amp-img>
  <amp-img lightbox="hero" src="/static/samples/img/clean-3.jpg" width="400" height="300" layout="responsive"></amp-img>
</div>

標題

您可以選擇性地為 lightbox 中的每個元素指定標題。<amp-lightbox-gallery> 會自動讀取並顯示這些欄位，優先順序如下：- figcaption（如果 lightbox 元素是 figure 的子元素）- aria-describedby。以下範例示範如何使用標題。第一張圖片沒有標題。第二張圖片使用 <figcaption>。第三張圖片使用 aria-describedby。

這是一條漫長的路。我們不知道它通往何方。

<amp-img lightbox="caption" src="/static/samples/img/road-1.jpg" width="300" height="200" layout="responsive"></amp-img>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<figure class="sample-figure">
  <amp-img lightbox="caption" src="/static/samples/img/road-2.jpg" width="300" height="200" layout="responsive"></amp-img>
  <figcaption>
    This is a long road. We don't know where it leads.
  </figcaption>
</figure>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<amp-img lightbox="caption" src="/static/samples/img/road-3.jpg" layout="responsive" width="300" height="200" aria-describedby="desc">
</amp-img>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<div hidden id="desc">
  I'm not too sure where this road leads either.
</div>

需要更多說明嗎？

如果本頁的說明未能涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。

前往 Stack Overflow

未說明的特色功能？

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

在 GitHub 上編輯範例

由 @cathyxz 撰寫

amp-lightbox-gallery

簡介

設定

基本用法

搭配 amp-carousel

Lightbox 群組

標題