amp-lightbox

lightboxをさっと出したい時に出してやりましょう

プラグインの読み込み

amp-lightboxを使用する場合は別途プラグインの読み込みが必要です。
amp.jsの後にでも読み込ませましょう。

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

基本構文と動作

どんな書き方でどんな動きすんのかを。まず簡単なものを。

<button on="tap:my-lightbox">Open lightbox</button>
<amp-lightbox id="my-lightbox" layout="nodisplay">
  <div class="lightbox">
    <amp-img src="/common/img/illust/1.jpg" width=300 height=300 on="tap:my-lightbox.close">
  </div>
</amp-lightbox>

ボタンのonプロパティで開くヤツのID指定して、画像のonプロパティで、IDの要素を閉じる
みたいに書いてるんスね。
カルーセルとかも入れられるかな。
ちなみにESCキーを押しても消えます。

動作デモ

デモ

各種プロパティについて

id必須	識別IDをつけましょうね。
layout	必ず【nodisplay】を設定しましょう。
scrollable	lightboxの中身がワクより大きくなる場合、スクロールさせることができます。ない場合はoverflow:hiddenです。

closeについて

上記の例の通り、tap:【閉じたいlightboxのid】.close
を好きな所に配置すると消えるようです。