amp-image-lightbox
簡介
amp-image-lightbox 元件允許使用者展開圖片以填滿視窗。
設定
在標頭中匯入 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-img 元素上的 on 動作啟動，並參考燈箱元素的 ID。
<amp-img on="tap:lightbox1" role="button" tabindex="0" src="/static/samples/img/Border_Collie.jpg" alt="Picture of a dog" title="Picture of a dog, view in lightbox" layout="responsive" width="300" height="246"></amp-img>
<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>
多圖片支援
甚至可以在同一個 amp-image-lightbox 中顯示不同的圖片。以下是另一張使用相同燈箱的圖片。
<amp-img on="tap:lightbox1" role="button" tabindex="0" src="/static/samples/img/Hovawart.jpg" alt="Picture of a dog" title="Picture of a dog, view in lightbox" layout="responsive" width="600" height="400"></amp-img>
標題：figcaption
amp-image-lightbox 也可選擇性地在視窗底部顯示圖片的標題。這可以是當圖片在 figure 標籤中時，<figcaption> 元素的內容...
<figure>
<amp-img on="tap:lightbox1" role="button" tabindex="0" src="/static/samples/img/Border_Collie.jpg" alt="Picture of a dog" title="Picture of a dog, view in lightbox" layout="responsive" width="300" height="246"></amp-img>
<figcaption>Border Collie.</figcaption>
</figure>
標題：aria-describedby
... 或是由圖片的 aria-describedby 屬性指定的 ID 元素的內容。
這是一隻邊境牧羊犬。
<amp-img on="tap:lightbox1" role="button" tabindex="0" aria-describedby="imageDescription" alt="Picture of a dog" title="Picture of a dog, view in lightbox" src="/static/samples/img/Border_Collie.jpg" width="300" height="246"></amp-img>
<div id="imageDescription">
This is a border collie.
</div>
需要更詳細的說明嗎？
如果此頁面上的說明未能涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。
前往 Stack Overflow 有未說明的特色功能？AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎針對您特別關注的問題提供一次性貢獻。
在 GitHub 上編輯範例-