iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 9
0
Modern Web

AMP系列 第 9

AMP(Lession 9) - AMP中使用Lightbox

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

(上面的 Y / N 是指有沒有用到這個 attribute)

Styling

可用標準 CSS 做設定

Actions

可使用 AMP on-syntax to trigger 觸發

attribute amp-lightbox amp-image-lightbox description
open Y Y 顯示 lightbox ,為預設值
close Y N 關閉 lightbox

參考來源:


上一篇
AMP(Lession 8) - carousel輪播圖片〈進階篇〉
下一篇
AMP(Lession 10) - 收合區域
系列文
AMP30

尚未有邦友留言

立即登入留言