Tutorial Membuat Lightbox dengan Alpinejs

Gambar dalam web tidak selalu ditampilkan dengan ukuran penuh.

Kadang ukurannya dibuat lebih kecil, kadang juga lebih besar.

Namun, ternyata ini menimbulkan masalah.

Misalnya seperti:

User tidak bisa melihat gambar lebih detail. Mereka haurs melakukan zoom in agar gambar terlihat lebih jelas.

Nah, untuk mengatasi masalah ini..

..kita bisa menggunakan komponen Lightbox.

Apa itu Lightbox?

dan gimana cara membuatnya?

Mari kita bahas!

Apa itu Lightbox?

Dalam dunia fotografi, lightbox merupakan sebuah kotak yang dipenuhi dengan cahaya. Biasanya dipakai untuk foto produk.

Apabila kita menaruh objek di sana, maka saat difoto akan terlihat jelas.

Light box dalam fotografi

Nah, begitu juga lightbox dalam dunia web.

Lighbox dalam web adalah sebuah elemen dialog untuk menampilkan gambar atau objek lainnya. Sehingga gambar tersebut akan lebih terlihat jelas.

Sebenarnya lightbox seperti modal, yang ditampilkan di atas elemen lainnya. Biasanya kita kenal dengan overlay.

Contoh penggunaan Lightbox biasanya kita sering temukan pada website e-commerce.

Oke..

Lalu bagaimana cara membuat lighbox dengan Alpinejs?

Mari kita pelajari.

1. Membuat Komponen Lightbox

Pertama, untuk membuat lightbox, kita harus membuat komponennya dulu.

Silahkan buat kode HTML baru, kemudian isi dengan kode seperti ini:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alpinejs Lightbox</title>

  <script src="https://unpkg.com/[email protected]/dist/cdn.min.js" defer></script>
  <link rel="stylesheet" href="/style.css">
</head>

<body>
  <div class="lightbox" x-data="{lightboxOpen: false, imgSrc: ''}" x-show="lightboxOpen" x-transition
    @lightbox.window="lightboxOpen = true; imgSrc = $event.detail;">
    <div class="lightbox-container">
      <img :src="imgSrc" @click.away="lightboxOpen = false">
    </div>
  </div>

</body>

</html>

Pada kode ini kita membuat komponen untuk lighbox.

Perhatikan di sana ada atribut @lightbox.window= ini merupakan custom event dengan nama lighbox untuk membuka lightbox.

Jadi nanti saat gambar diklik, event ini akan kita panggil.

Kemudian buat file style.css dengan isi seperti ini:

.lightbox {
  position: fixed;
  inset: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.8);
}

.lightbox-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

Untuk saat ini, hasilnya belum dapat kita lihat karena belum ada gambar untuk ditampilkan.

Mari kita lanjut:

2. Menambahkan Gambar

Tambahkan elemen gambar seperti ini di HTML yang baru saja kita buat:

<div x-data class="gallery">
  <img src="https://picsum.photos/id/1/160/160"
    @click="$dispatch('lightbox', 'https://picsum.photos/id/1/640/360')" />
  <img src="https://picsum.photos/id/2/160/160"
    @click="$dispatch('lightbox', 'https://picsum.photos/id/2/640/360')" />
  <img src="https://picsum.photos/id/3/160/160"
    @click="$dispatch('lightbox', 'https://picsum.photos/id/3/640/360')" />
  <img src="https://picsum.photos/id/4/160/160"
    @click="$dispatch('lightbox', 'https://picsum.photos/id/4/640/360')" />
</div>

Ini adalah elemen gallery, saat elemen gambar pada galley diklik.. maka akan menjalankan custom event lighbox dengan parameter URL gambar yang akan ditampilkan di dalam lightbox.

Berikutnya, tambahkan kode CSS berikut di dalam style.css agar tampilan galery lebih rapi.

.gallery {
  display: flex;
  gap: 1em;
}

.gallery img {
  cursor: zoom-in;
}

Oke sekarang mari kita uji coba!

3. Percobaan Lighbox

Coba buka HTML yang baru saja dibuat dengan browser dan cobalah untuk klik gambar pada galeri.

Maka hasilnya:

Kamu juga bisa tes live demonya:

(klik 0.5x untuk zoom out)

Mantap! 👍

Berikutnya kita akan coba membuat tombol close.

4. Membuat Tombol Close

Tombol Close berfungsi untuk menutup lighbox, sebenarnya tanpa tombol ini Lightbox sudah bisa kita tutup dengan melakukan klik pada area background.

Tapi biar lebih menarik, mari kita tambahkan tombol close.

Ubahlah struktur komponen lightbox menjadi seperti ini:

<div class="lightbox" x-data="{lightboxOpen: false, imgSrc: ''}" x-show="lightboxOpen" x-transition.opacity
@lightbox.window="lightboxOpen = true; imgSrc = $event.detail">
<div class="lightbox-container">
  <div class="lightbox-content">
    <button class="lightbox-close" @click="lightboxOpen = false">&times;</button>
    <img :src="imgSrc" @click.away="lightboxOpen = false">
  </div>
</div>
</div>

Kemudian tambahkan CSS seperti ini pada style.css.

.lightbox-content {
  position: relative;
}

.lightbox-close {
  position: absolute;
  top: -1em;
  right: -1em;
  border-radius: 50%;
  height: 44px;
  width: 44px;
  font-size: 1.8em;
}

Setelah itu coba buka lagi di browser.

Maka hasilnya:

lightbox close button

Live Demo:

5. Menambahkan Effek Transisi

Sebenarnya kita sudah menambahkan efek transisi pada lightbox.

Coba perhatikan komponen lightbox.. di sana ada atribut x-transition.

Atribut x-transition adalah atribut direktif untuk membuat transisi fade in dan scale up. Transisi otomatis dipilih berdasarkan kondisi element.

Kamu bisa baca dokumentasi transisi Alpinejs di sini.

Oke, sekarang kita akan coba menambahkan transisi scale up menampilkan gambar dan fade in untuk menampilkan background lightbox.

Silahkan ubah komponen lightbox menjadi seperti ini:

<div class="lightbox" x-data="{lightboxOpen: false, imgSrc: ''}" x-show="lightboxOpen" x-transition.opacity
  @lightbox.window="lightboxOpen = true; imgSrc = $event.detail">
  <div class="lightbox-container">
    <div class="lightbox-content" x-show="lightboxOpen" x-transition.scale>
      <button class="lightbox-close" @click="lightboxOpen = false">&times;</button>
      <img :src="imgSrc" @click.away="lightboxOpen = false">
    </div>
  </div>
</div>

Perhatikan direktif x-transition.opacity dan x-transition.scale.

  • x-transition.opacity adalah direktif untuk transisi fade in;
  • x-transition.scale adalah direktif untuk transisi scale up.

Sekarang silahkan coba lihat hasilnya.

Live Demo:

6. Membuat Caption pada Lightbox

Untuk menambahkan caption di lightbox, maka kita harus mengubah lagi bentuk kode dari komponen lightbox.

Silahkan ubah menjadi seperti ini:

<div class="lightbox" x-data="{lightboxOpen: false, imgSrc: '', caption: ''}" x-show="lightboxOpen" x-transition.opacity
@lightbox.window="lightboxOpen = true; imgSrc = $event.detail.src; caption = $event.detail.caption">
<div class="lightbox-container">
  <div class="lightbox-content" x-show="lightboxOpen" x-transition.scale>
    <button class="lightbox-close" @click="lightboxOpen = false">&times;</button>
    <img :src="imgSrc" @click.away="lightboxOpen = false">
    <p x-text="caption" class="caption"></p>
  </div>
</div>
</div>

Kemudian tambahkan CSS untuk caption seperti ini:

.lightbox-content .caption {
  text-align: center;
  color: white;
}

Setelah itu, ubah kode pada bagian gelri menjadi seperti ini:

<div x-data class="gallery">
  <img src="https://picsum.photos/id/1/160/160"
    @click="$dispatch('lightbox', {src: 'https://picsum.photos/id/1/640/360', caption: 'ini caption 1'})" />
  <img src="https://picsum.photos/id/2/160/160"
    @click="$dispatch('lightbox', {src: 'https://picsum.photos/id/2/640/360', caption: 'ini caption 2'})" />
  <img src="https://picsum.photos/id/3/160/160"
    @click="$dispatch('lightbox', {src: 'https://picsum.photos/id/3/640/360', caption: 'ini caption 3'})" />
  <img src="https://picsum.photos/id/4/160/160"
    @click="$dispatch('lightbox', {src: 'https://picsum.photos/id/4/640/360', caption: 'ini caption 4'})" />
</div>

Perhatikan pada atribut @click di sana kita melakukan dispatch custom event dengan parameter berupa objek {src: '...', caption: '...'}.

Objek inilah yang akan digunakan di dalam lightbox untuk membuat caption.

Sekarang mari kita coba!

lightbox caption

Mantap, caption-nya berhasil ditampilkan.

Live demo:

Selain dengan cara ini, sebenarnya kita juga bisa mengambil caption dari atribut alt dan title.

Silahkan manfaatkan objek $event.target untuk mengambilnya.

  • $event.target.alt untuk mengambil caption dari atribut alt;
  • $event.target.title untuk mengambil caption dari atribut title.

Contoh:

Apa Selanjutnya?

Begitulah cara membuat lightbox dengan Alpinejs.

Cukup mudah bukan..

Selanjutnya silahkan terapkan ini di proyekmu.

Kalau ada pertanyaan, mari sampaikan melalui komentar!