Cara menambahkan galeri gambar lightbox amp-lightbox-gallery

Sejak AMP diluncurkan, pengembang telah meminta cara mudah untuk menautkan amp-carrusel dengan sehingga pengguna dapat mengalami pandangan mendalam tentang konten di komidi putar. Meskipun mungkin untuk menggabungkan banyak komponen seperti amp-bind untuk membuat sesuatu seperti ini berfungsi, itu tidak mudah.

Komponen <amp-lightbox-gallery>  menyediakan pengalaman multimedia yang mendalam yang bisa independen atau terintegrasi dengan amp-carousel. Komponen dapat diterapkan ke gambar terpisah atau ke sekelompok gambar sehingga ketika pengguna menyentuh gambar-gambar ini, masukkan tampilan mendalam di mana mereka dapat meluncur mulus dari satu gambar ke yang lain. Ketika  <amp-lightbox-gallery> diterapkan ke <amp-carrusel>,semua gambar carousel mewarisi perilaku lightbox galeri, sehingga slide antara elemen tampilan immersive disinkronkan dengan yang ada di lightbox, untuk membuat gambar yang seragam, pengalaman galeri intuitif.

Masukkan komponen berikut "script"

Impor komponen amp-lightbox-gallery di header.

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

Secara opsional, impor komponen amp-carousel di header jika Anda menggunakan lightbox dengan carousel.

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

Penggunaan Dasar

Ini adalah contoh dasar yang menunjukkan lightboxed <amp-img>. Anda memiliki satu atau lebih elemen <amp-img>  di halaman. Cukup tambahkan atribut "lightbox" ke setiap gambar yang ingin Anda lihat di lightbox.

Contohnya




  
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



<div class="container">
  <amp-img lightbox
    src="/img/road-1.jpg"
    width="300"
    height="200"
    layout="responsive"></amp-img>
  <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  <amp-img lightbox
    src="/img/road-2.jpg"
    width="300"
    height="200"
    layout="responsive"></amp-img>
  <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  
<amp-img lightbox
    src="/img/road-3.jpg"
    width="300"
    height="200"
    layout="responsive"></amp-img>
  <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Gunakan dengan carrusel

Anda juga bisa menggunakan <amp-lightbox-gallery> con <amp-carousel> untuk melihat isi korsel di lightbox. Cukup sertakan <amp-carousel> con <amp-img> dan tambahkan atribut "lightbox" al <amp-carousel>. Gambar kotak lightbox disinkronkan dengan slide carrusel.

Contohnya



    
    
    
  

  <amp-carousel lightbox
    width="400"
    height="300"
    layout="responsive"
    type="slides">
    <amp-img src="/img/image1.jpg"
      width="400"
      height="300"
      layout="responsive"></amp-img>
    <amp-img src="/img/image2.jpg"
      width="400"
      height="300"
      layout="responsive"></amp-img>
    <amp-img src="/img/image3.jpg"
      width="400"
      height="300"
      layout="responsive"></amp-img>
  </amp-carousel>

Grup dari Lightbox

Secara default, semua elemen lightbox akan dikelompokkan dalam lightbox yang sama kecuali jika itu milik korsel. Semua elemen dalam korsel lightbox yang sama milik lightbox yang sama. Anda bisa mengganti perilaku ini dengan mengatur atribut lightbox ke string tunggal. Pola umum adalah memiliki gambar pahlawan yang terbuka di lightbox galeri beberapa gambar.

Contohnya



    
      See photo gallery
    
    


<amp-img lightbox="hero"
      src="/img/clean-2.jpg"
      width="400"
      height="300"
      layout="responsive">
      <span class="overlay-text">See photo gallery</span>
    </amp-img>
    <div hidden>
      <amp-img lightbox="hero"
        src="/img/clean-1.jpg"
        layout="responsive"
        width="400"
        height="710"></amp-img>
      <amp-img lightbox="hero"
        src="/img/clean-3.jpg"
        width="400"
        height="300"
        layout="responsive"></amp-img>
    </div>

Teks (Teks)

Secara opsional, Anda dapat menentukan judul untuk setiap elemen di lightbox. Bidang-bidang ini dibaca dan ditampilkan secara otomatise <amp-lightbox-gallery> dalam urutan prioritas berikut:

figcaption (jika elemen lightbox adalah putra dari sebuah gambar)
aria-describedby Contoh-contoh berikut menunjukkan bagaimana cara menggunakan subtitle. Gambar pertama tidak memiliki judul. Gambar kedua menggunakan <figcaption>. Gambar ketiga menggunakan  aria-describedby.

Contohnya





  
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  

    
    

      This is a long road. We don't know where it leads.
    
  
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  
  
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  



<div class="container">
  <amp-img lightbox="caption"
    src="/img/road-1.jpg"
    width="300"
    height="200"
    layout="responsive"></amp-img>
  <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
 <figure>
    <amp-img lightbox="caption"
      src="/img/road-2.jpg"
      width="300"
      height="200"
      layout="responsive"></amp-img>
    <figcaption class="image">
      This is a long road. We don't know where it leads.
    </figcaption>
  </figure>
  <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

 <amp-img lightbox="caption"
    src="/img/road-3.jpg"
    layout="responsive"
    width="300"
    height="200"
    aria-describedby="desc">
  </amp-img>
  <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <div hidden
    id="desc">
    I'm not too sure where this road leads either.
  </div>
</div>

Tags: Amp Html Tutorial Blog

Share: