author Ahmad Muhardian

Cara Membuat Lightbox dengan Alpinejs


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!

Baca Juga ini

Cara Membuat Halaman Github untuk Repositori

Cara Membuat Halaman Github untuk Repositori

Pada tulisan sebelumnya, saya pernah membahas tentang cara membuat halaman Github untuk profil individu dan organisasi. Nah, kali ini kita akan membuat halaman github untuk proyek atau repositori. Jadi sebenarnya, setiap proyek atau respositori di Github itu bisa dijadikan halaman Github (Github Pages). Pastikan di dalam proyek berisi file web statis seperti HTML, CSS, dan Javascript. Membuat repositoriBuatlah repositori dengan nama apa saja, kemudian di dalamnya berisi file web statis. Setelah itu, upload ke github.

7 Manfaat Inspect Element Bagi Web Developer

7 Manfaat Inspect Element Bagi Web Developer

Inspect Element merupakan fitur browser yang dibuat untuk memudahkan pengembangan web. Inspect Element dapat kita akses dengan klik kanan, kemudian memilih Inspect Element, atau bisa juga dengan menekan tombol F12. Adapun manfaat dari Inspect Element untuk web Developer adalah sebagai berikut. 1. Tempat Eksperimen CSSSelain ada console Javascript, bisa dibilang di Inspect Elemen juga ada console-nya CSS. Ya, di sana kita bisa eksperimen kode CSS. Sebelum kita menulis kode CSS, sebaiknya gunakan Inspect Element terlebih dahulu.

Cara Menggunakan highlight.js di Blogger

Cara Menggunakan highlight.js di Blogger

Template baawan blogger sudah saya modifikasi sedemikian rupa. Namun, masih ada yang kurang, pewarnaan kode (syntax highlighting). Kode yang saya sisipkan di dalam artikel tidak berwarna. Kadang saya memanfaatkan gist github, pastebin, ideone, dsb. untuk menyisipkan kode yang berwarna. Modul highlight.js berfungsi untuk membuat kode (di web) menjadi berwarna. Kode yang berwarna akan lebih mudah dibaca. Karena itu, kita perlu menggunakan highlight.js. Berikut ini cara menggunakan highlight.js di blogger. 1. Memasang higlight.

Tutorial Reactjs #4: Memahami Sintaks Dasar JSX

Tutorial Reactjs #4: Memahami Sintaks Dasar JSX

Pelajari lebih dalam sintaks JSX untuk membuat komponen Reactjs. Apa itu JSX? Gimana cara Looping dan melakukan conditional rendering di JSX? mari kita perlajari!

Cara Membuat Bottom Navbar Seperti Aplikasi Mobile dengan Bootstrap

Cara Membuat Bottom Navbar Seperti Aplikasi Mobile dengan Bootstrap

Gunakan Bottom Navbar agar navigasi websitemu semakin bagus di perangkat mobile.

Menggunakan Grid.js untuk Membuat Tabel Dinamis di HTML

Menggunakan Grid.js untuk Membuat Tabel Dinamis di HTML

Malas membuat tabel dinamis sendiri? gunakan saja Gridjs. Pada tutorial ini, kita akan belajar cara menggunakan Gridjs dengan data dari sisi client dan server.