Skip to main content

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.
Reaksi:

Berbagi Itu Peduli :

Comment Policy: Gunakanlah kontak komentar ini dengan bijak jangan buat link atau spam, Jika berkenan silahkan terlebih dahulu, Follow this blog

Selanjutnya tuliskan komentar anda sesuai dengan topik postingan ini.

Centang kotak Beritahu saya untuk mendapatkan notifikasi balasan via email.

Untuk komentar secara Private silahkan masuk ke Messaging Google