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.

Follow us on Instagram
@encepnurdin.id

More from Instagram...

Follow us on Facebook
@encepnurdin.id

Find us on Google Maps
@encepnurdin

Reaksi:

Berbagi Itu Peduli :

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Jika merasa artikel ini bermanfaat ulas saya di google maps
https://g.page/encepnurdin/review
Buka Komentar
Aplikasi: Tambahkan aplikasi encepnurdin. id di smartphone tanpa install, buka encepnurdin. id dengan browser Chrome di smartphone lalu klik ikon 3 titikdi browser kemudian pilih "Tambahkan ke layar utama". Selanjutnya klik aplikasi encepnurdin. id dari layar utama smartphone Anda.

Yuk langganan artikel gratis