12/16/2016

Cara menambahkan amp-image-lightbox


amp-image-lightbox


Contoh implementasi: Komponen amp-image-lightbox memungkinkan pengguna untuk memperluas gambar untuk mengisi jendela grafik.

Bersiaplah

Impor komponen amp-image-lightbox di tajuk.

Masukkan script berikut tepat setelah pembukaan <head>


<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>

Penggunaan dasar

Amp-image-lightbox diaktifkan oleh aksi elemen amp-img yang mengacu pada ID elemen lightbox.


Contohnya









<amp-img on="tap:lightbox1"
  role="button"
  tabindex="0"
  src="/img/Border_Collie.jpg"
  alt="Amp html shannenpio"
  title="Amp html shannenpio, view in lightbox"
  layout="responsive"
  width="300"
  height="246"></amp-img>

Gambar yang ditunjukkan di lightbox tidak perlu ditentukan.


Contohnya

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

Bahkan dimungkinkan untuk menampilkan gambar berbeda di amp-image-lightbox yang sama. Berikut adalah gambar lain yang menggunakan yang sama lightbox.


Contohnya








<amp-img on="tap:lightbox1"
  role="button"
  tabindex="0"
  src="/img/Hovawart.jpg"
  alt="Amp html shannenpio"
  title="Amp html shannenpio, view in lightbox"
  layout="responsive"
  width="600"
  height="400"></amp-img>

Captions

Amp-image-lightbox juga dapat secara opsional menampilkan legenda untuk gambar di bagian bawah jendela grafik. Esto puede ser el <figcaption> elemento <figcaption> ketika gambar ada di label gambar ...


Contohnya





  
  
Amp html shannenpio.







<figure>
  <amp-img on="tap:lightbox1"
    role="button"
    tabindex="0"
    src="/img/Border_Collie.jpg"
    alt="Amp html shannenpio"
    title="Amp html shannenpio, view in lightbox"
    layout="responsive"
    width="300"
    height="246"></amp-img>
  <figcaption>Border Collie.</figcaption>
</figure>

... atau konten elemen yang ID-nya ditentukan oleh atribut gambar yang dijelaskan oleh aria-describedby.


Contohnya




  

    This is a border collie.
  





 <amp-img on="tap:lightbox1"
    role="button"
    tabindex="0"
    aria-describedby="imageDescription"
    alt="Amp html shannenpio"
    title="Amp html shannenpio, view in lightbox"
    src="/img/Border_Collie.jpg"
    width="300"
    height="246"></amp-img>
  <div id="imageDescription">
    This is a border collie.
  </div>




Tags:

Share:

Related post

You Might Also Like:

Disqus comments:

Facebook comments: