amp-lightbox-gallery
簡介
amp-lightbox-gallery 元件為 AMP 元件（例如 amp-img、amp-carousel）提供「燈箱」體驗。當使用者與 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>
如果您將燈箱與輪播搭配使用，可選擇性地在標頭中匯入 amp-carousel 元件。
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
基本用法
這是一個基本範例，示範了燈箱化的 <amp-img>。您在頁面上有一個或多個 <amp-img> 元素。只需將 "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.
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.
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> 搭配使用，以在燈箱中檢視輪播的內容。只需包含一個具有 <amp-img> 的 <amp-carousel>，並將 "lightbox" 屬性新增至 <amp-carousel>。燈箱圖片將與輪播投影片同步。
<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>
燈箱分組
依預設，所有燈箱化的元素將分組到同一個燈箱中，除非它們屬於輪播。同一個燈箱輪播中的所有元素都屬於同一個燈箱。您可以透過將燈箱屬性設定為唯一字串來覆寫此行為。一種常見的模式是擁有一個英雄圖片，該圖片會開啟成包含多個圖片的燈箱圖庫。
<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>
標題
您可以選擇性地為燈箱中的每個元素指定標題。這些欄位會由 <amp-lightbox-gallery> 自動讀取和顯示，優先順序如下：- figcaption（如果燈箱化的元素是 figure 的子元素）- aria-describedby。以下範例示範如何使用標題。第一張圖片沒有標題。第二張圖片使用 <figcaption>。第三張圖片使用 aria-describedby。
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.
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.
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="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 上編輯範例-