AMP(Lession 9) - AMP中使用Lightbox

2019鐵人賽 amp 前端 lightbox

majo2013

2018-10-09 17:42:05

2020 瀏覽

AMP中使用Lightbox

在上一篇文章我們有點到 lightbox ，現在我們就來講講 lightbox 吧！

在 AMP 中有2個套件具有 lightbox 的功能

amp-lightbox - 在 full-viewport 的 lightbox 套件下顯示元件
amp-image-lightbox - 為指定圖片做出 lightbox 效果
- 多張圖片可共用一個 <amp-image-lightbox> 來達到 lightbox 顯示效果
- 允許的使用者操作有:縮放（zooming）、平移（panning）、顯示與隱藏（showing/hiding）敘述

~~剛開始看到分2個時，總忍不住會想：為何不使用一個套件解決呢~~ 下面我們來比較一下兩者的差別吧

Required Script

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

基本語法

amp-lightbox

<button on="tap:quote-lb">See Quote</button>

在此物件上 tap event 時，會觸發 id="quote-lb" 的物件於 lightbox 效果下顯示

<amp-lightbox id="quote-lb" layout="nodisplay">
    <blockquote>"Don't talk to me about JavaScript fatigue" - Horse JS</blockquote>
    <button on="tap:quote-lb.close">Nice!</button>
</amp-lightbox>

在 <amp-lightbox> tag 上設 id ，才可實現觸發此區域於 lightbox 效果下顯示
在此物件上 tap event 時，會觸發 id="quote-lb" 的 <amp-lightbox> 物件結束 lightbox 效果下顯示

amp-image-lightbox

<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>

在 <amp-image-lightbox> tag 上設 id ，才可實現觸發此區域於 lightbox 效果下顯示

<amp-img on="tap:lightbox1"
    role="button"
    tabindex="0"
    src="image1.jpg"
    width="200" height="100"></amp-img>

在此物件上 tap event 時，會觸發 id="lightbox1" 的 <amp-image-lightbox> 物件於 lightbox 效果下顯示

Attributes

attribute	amp-lightbox	amp-image-lightbox	values & description
id （必填）	Y	Y
layout （必填）	Y	Y	一定要為 `nodisplay`
animate-in （非必填）	Y	N	預設為 `fade-in` , 其他尚有 `fly-in-bottom` , `fly-in-top`
close-button （在 AMPHTML ads為必填項）	Y	N
scrollable （非必填）（在 AMPHTML ads 中是不允許存在的）	Y	N	當內容多於 lightbox 區域時，可以做捲動
data-close-button-aria-label （必填）	N	Y