Cara 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.
Nah, begitu juga lightbox dalam dunia web.
Lightbox 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 lightbox dengan Alpinejs?
Mari kita pelajari.
1. Membuat Komponen Lightbox
Pertama, untuk membuat lightbox, kita harus membuat komponennya dulu.
Silakan 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 lightbox.
Perhatikan di sana ada atribut @lightbox.window=
ini merupakan custom event dengan nama lightbox
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 lightbox
dengan parameter URL gambar yang akan ditampilkan di dalam lightbox.
Berikutnya, tambahkan kode CSS berikut di dalam style.css
agar tampilan galeri lebih rapi.
.gallery {
display: flex;
gap: 1em;
}
.gallery img {
cursor: zoom-in;
}
Oke sekarang mari kita uji coba!
3. Percobaan Lightbox
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 lightbox, 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">×</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:
Live Demo:
5. Menambahkan Efek 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.
Silakan 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">×</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 silakan 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.
Silakan 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">×</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 galeri 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!
Mantap, caption-nya berhasil ditampilkan.
Live demo:
Selain dengan cara ini, sebenarnya kita juga bisa mengambil caption dari atribut alt
dan title
.
Silakan manfaatkan objek $event.target
untuk mengambilnya.
$event.target.alt
untuk mengambil caption dari atributalt
;$event.target.title
untuk mengambil caption dari atributtitle
.
Contoh:
Apa Selanjutnya?
Begitulah cara membuat lightbox dengan Alpinejs.
Cukup mudah bukan..
Selanjutnya silakan terapkan ini di proyekmu.
Kalau ada pertanyaan, mari sampaikan melalui komentar!