AMP by Example

Introduction
Introduction

Components
Components

Advanced
Advanced

Samples & Templates
Samples & Templates

AMP for Ads (A4A)
AMP for Ads (A4A)

View Source

amp-image-lightbox

Introduction

The amp-image-lightbox component allows the user to expand an image to fill the viewport.

Show Hidden Code Hide Code
<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>

Setup

Import the amp-image-lightbox component in the header

  <script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
Show Hidden Code Hide Code
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <link rel="canonical" href="https://ampbyexample.com/components/amp-image-lightbox/">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>

Basic Usage

The amp-image-lightbox is activated using the on action on an amp-img element referencing the lightbox element's ID.

  <amp-img on="tap:lightbox1"
      role="button"
      tabindex="0"
      layout="responsive"
      src="/img/Border_Collie.jpg"
      width="300"
      height="246"></amp-img>

This is the lightbox. The image shown in the lightbox does not need to be defined.

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

It is even possible to show different images in the same amp-image-lightbox. Here is another image using the same lightbox.

  <amp-img on="tap:lightbox1"
      role="button"
      tabindex="0"
      layout="responsive"
      src="/img/Hovawart.jpg"
      width="600"
      height="400"></amp-img>

Captions

The amp-image-lightbox also can optionally display a caption for the image at the bottom of the viewport. This can either be the contents of the <figcaption> element when the image is in the figure tag...

  <figure>
    <amp-img on="tap:lightbox1"
        role="button"
        tabindex="0"
        src="/img/Border_Collie.jpg"
        width="300"
        height="246"></amp-img>
    <figcaption>Border Collie.</figcaption>
  </figure>
Border Collie.

... or the contents of the element whose ID is specified by the image's aria-describedby attribute.

  <amp-img on="tap:lightbox1"
      role="button"
      tabindex="0"
      aria-describedby="imageDescription"
      src="/img/Border_Collie.jpg"
      width="300"
      height="246"></amp-img>
  <div id="imageDescription">
    This is a border collie.
  </div>
This is a border collie.

Next up:

</body>
</html>