範例：燈箱廣告 - amp.dev

燈箱廣告
- 摘要樣式 Banner 標記卡片燈箱

實驗性功能

這個範例使用了以下實驗性功能：amp-lightbox-a4a-proto。透過下方的按鈕啟用實驗性功能。部分元件也需要啟用 AMP Beta 版管道。深入瞭解實驗性功能。

啟用實驗性功能
AMP 版本
PROD BETA

檢視示範在 Playground 中開啟

摘要

使用 amp-lightbox 的 AMPHTML 廣告範例。

樣式

這是一個進階範例，需要一些樣式設定才能使其看起來和運作正常。此處設計的樣式是回應式設計，可適用於各種廣告尺寸。

<style amp-custom>
  /* Main element that contains the creative. */
  .root-container {
    background: #000;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    overflow: hidden;
    width: 340px;
    height: 240px;
    position: relative;
    margin: 0 auto;
    display: block;
  }
  .logo-img {
    display: block;
  }
  .stretch {
    flex: 1;
  }
  .button {
    text-transform: uppercase;
    padding: 8px;
    color: #fff;
    display: inline-block;
    background-color: #2979ff;
    text-decoration: none;
  }
  .button:active {
    background-color: #92bbff;
  }
  /* Basic cards styling */
  .cards-container {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
  }
  .card {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  /* Position expand button absolutely on top of the card */
  .expand-button {
    padding: 0;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    position: absolute;
    z-index: 1;
    left: 40%;
    top: 40%;
    font-size: 24px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
  }
  /* Change position of the expand button for the middle card */
  .card-gauges .expand-button {
    left: 90px;
    top: 50px;
  }
  /* Lightbox styling */
  amp-lightbox {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.8);
  }
  .lightbox {
    height: 100%;
    margin: 0 auto 0;
    max-width: 600px;
    background: #fff;
    color: #888;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  }
  .lightbox-main {
    flex: 1;
    display: flex;
    max-width: 340px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 20px;
    line-height: 20px;
    align-self: center;
  }
  .lightbox-main p {
    margin: 5px 0;
  }
  .lightbox-main h3 {
    text-transform: uppercase;
    margin: 10px auto 0;
    font-weight: normal;
    letter-spacing: 2px;
    font-size: 14px;
    color: #000;
    align-self: center;
    max-width: 320px;
  }
  /* Creates decorative underline for h3 headers */
  .lightbox-main h3:after {
    display: block;
    content: " ";
    background-color: #2979ff;
    width: 20px;
    height: 3px;
    margin: 12px auto 10px;
  }
  .lightbox-close-container {
    text-align: center;
    border-top: 1px solid #eee;
    padding: 18px 0;
  }
  .lightbox-header {
    background: #000;
    text-align: center;
    padding: 10px 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .lightbox-header h1  {
    display: inline;
    color: #fff;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 14px;
    border-left: 1px solid #fff;
    margin: 0 0 0 12px;
    padding-left: 12px;
  }
  .lightbox-hero {
    position: relative;
    overflow: hidden;
  }
  .learn-more a {
    padding: 8px;
    text-transform: uppercase;
    display: inline-block;
    color: #2979ff;
    text-decoration: none;
    font-weight: bold;
  }
  .learn-more a:active {
    background-color: #f0f0f0;
  }
  /* Responsive styles so that the lightbox does not over-stretch */
  @media (max-height: 500px) {
    .lightbox {
      max-width: 400px;
    }
    .lightbox-hero {
      max-height: 160px;
    }
    .lightbox-hero-img {
      margin-top: -30px;
    }
  }
  @media (max-height: 360px) {
    .lightbox-hero-img {
      display: none;
    }
    .lightbox-header {
      position: static;
    }
  }
</style>

amp-ad-banner 是一個虛擬 AMP 元素，AMP 執行階段會使用它來判斷燈箱開啟時廣告的位置。

請注意，amp-ad-banner 仍處於實驗階段，未來可能會變更。請參閱這個 GitHub issue 以追蹤進度。

<amp-ad-banner class="root-container" layout="container">

卡片

AMP 具有用於事件和動作的系統。它使用特定領域語言來描述動作的觸發方式。在此範例中，我們設定了 on 屬性，以便在輕觸卡片按鈕時啟用燈箱。

每個按鈕都會開啟與觸發它的卡片相關聯的燈箱。

<div class="cards-container" id="cardsContainer">
  <div class="card card-seats">
    <div class="button expand-button"
        role="button"
        on="tap:lightbox-seats.activate">+</div>
    <amp-img src="/static/samples/img/car-seats.jpg"
        width="340"
        height="240"
        layout="responsive"
        alt="Ergonomic Leather Seats"></amp-img>
  </div>
</div>

燈箱

amp-lightbox 元件定義了將在全螢幕重疊畫面中顯示的子元素。我們為每個燈箱設定了不同的 ID，以便可以使用其他元素上的動作來開啟和關閉它們。其內容為一般的 AMP HTML。

<amp-lightbox id="lightbox-seats" layout="nodisplay">
  <div class="lightbox">
    <div class="lightbox-hero">
      <amp-img src="/static/samples/img/car-seats.jpg"
          width="608"
          height="342"
          layout="responsive"
          alt="Ergonomic Leather Seats"
          class="lightbox-hero-img"></amp-img>
      <div class="lightbox-header">
        <amp-img src="/static/samples/img/car-logo.png"
            width="72"
            height="32"
            layout="fixed"
            alt="Howdy"
            class="logo-img"></amp-img>
        <h1>The all-new WX-S R5</h1>
      </div>
    </div>
    <div class="lightbox-main">
      <h3>Ergonomic Leather Seats</h3>
      <p>
        Available in Comfort Suede and leather. High-contrast stitching colors available.
      </p>
      <p class="learn-more">
        <a href="https://amp.dev.org.tw/documentation/examples/" target="_blank">Learn more</a>
      </p>
    </div>
    <div class="lightbox-close-container">
      <div class="button lightbox-close-button" role="button"
          on="tap:lightbox-seats.close">
        Close
      </div>
    </div>
  </div>
</amp-lightbox>

需要更多說明嗎？

如果本頁的說明沒有涵蓋您的所有問題，請隨時與其他 AMP 使用者聯絡，討論您的確切使用案例。

前往 Stack Overflow

有無法解釋的功能嗎？

AMP 專案大力鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別感興趣的問題做出一次性的貢獻。

在 GitHub 上編輯範例

作者： @sebastianbenz

燈箱廣告

實驗性功能

摘要

樣式

Banner 標記

卡片

燈箱