How To Setup Amp Image Lightbox



BLOG MOBILE






INTRODUCTION.



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

SETUP.



Imfort the amp-image-lightbox component in the header </head>
<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>


BASIC USED.


The amp-image-lightbox is activated using the on action on an  amp-image elements referencing the lightbox elements ID.
EXAMPLE.


<amp-img on="tap:lightbox1"
  role="button"
  tabindex="0"
  src="https://1.bp.blogspot.com/-ELS9uccjbio/WR6rm0YIzKI/AAAAAAAAC9I/QO-X0sTDcZcpUCOT1ry4TrTOlzfyhtrugCLcB/s1600/IMG_20170519_151819-min.jpg"
  alt="encep nurdin"
  title="encep nurdin, view in lightbox"
  layout="responsive"
  width="300"
  height="246"></amp-img>

The is lightbox.the image shown in the lightbox does not need to defined.
EXAMPLE.
<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.
EXAMPLE.
<amp-img on="tap:lightbox1"
  role="button"
  tabindex="0"
  src="/img/Hovawart.jpg"
  alt="Picture of a dog"
  title="Picture of a dog, view in lightbox"
  layout="responsive"
  width="600"
  height="400"></amp-img>

CAPTIONS.


The amp-image-lightbox  also can optionally display a captions for the image at the button of the viewport
The can either be the content of the figcaption element when the image is in the figur tag...
EXAMPLE.
<figure>
  <amp-img alt="Picture of a dog" height="246" layout="responsive" on="tap:lightbox1" role="button" src="https://ampbyexample.com/img/Border_Collie.jpg" tabindex="0" title="Picture of a dog, view in lightbox" width="300"></amp-img>
  <figcaption>Border Collie.</figcaption>
</figure>

Border Collie.
Or the contents of the element whose ID is specified by the image's aria-described by atribute.
EXAMPLE.
<amp-img on="tap:lightbox1"
    role="button"
    tabindex="0"
    aria-describedby="imageDescription"
    alt="Picture of a dog"
    title="Picture of a dog, view in lightbox"
    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.

blog views
Reactions:
Donate via PayPal

You Might Also Like:

ADD A COMMENT WITH YOUR FACEBOOK PLEASE WAIT FOR FACEBOOK COMMENT WILL SOON OPEN

ADD A COMMENT WITH DISQUS HIDE COMMENT

Disqus Comments

ADD A COMMENT WITH GOOGLE PLUS HIDE COMMENT

google Comments

Hello, how may we help you? Just send us a message now to get assistance.

Facebook Messenger ×