Cara menggunakan image zoom javascript codepen

Question

Kode CSS Cara Membuat Kartu yang Bisa Di-Blur di Hover dan efek Scale Image (gambar bisa diperbesar). Cara membuat kartu ini sangat sederhana dan hanya menggunakan css murni tanpa javascript

Table of Contents Show

Apa itu Lightbox?
1. Membuat Komponen Lightbox
2. Menambahkan Gambar
3. Eksperimen Lightbox
4. Membuat Tombol Tutup
5. Menambahkan Efek Transisi
6. Membuat Caption di Lightbox

Lihat di Codepen -> Klik

Pengguna tidak dapat melihat gambar yang lebih detail. Mereka harus memperbesar agar gambar terlihat lebih jelas

Nah, untuk mengatasi masalah tersebut

kita dapat menggunakan komponen Lightbox

Apa itu Lightbox?

dan bagaimana cara membuatnya?

Mari berdiskusi

Dalam dunia fotografi, lightbox adalah kotak yang berisi cahaya. Biasanya digunakan untuk foto produk

Jika kita meletakkan objek disana, maka saat difoto akan terlihat dengan jelas

Nah, begitu juga lightbox di dunia web

Lightbox di web adalah elemen dialog untuk menampilkan gambar atau objek lain. Sehingga gambar akan terlihat lebih jelas

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

Contoh penggunaan Lightbox biasanya terdapat pada website e-commerce

Oke

Lalu bagaimana cara membuat lighbox dengan Alpinejs?

Ayo Belajar

Pertama, untuk membuat lightbox, kita harus membuat komponennya terlebih dahulu

Silahkan buat kode HTML baru, lalu 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>

Dalam kode ini kami membuat komponen untuk lightbox

Perhatikan bahwa ada atribut

.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;
}

_0 ini adalah acara khusus dengan nama

.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;
}

1 untuk membuka lightbox

Jadi nanti kalau gambarnya diklik, kita sebut event ini

Kemudian buat file

.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;
}

_2 dengan konten 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 kami belum bisa melihat hasilnya karena belum ada gambar yang bisa ditampilkan

Ayo lanjutkan

2. Menambahkan Gambar

Tambahkan elemen gambar seperti ini ke 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 galeri, saat elemen gambar di galeri diklik. kemudian akan menjalankan acara khusus

.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;
}

_1 dengan URL parameter gambar yang akan ditampilkan di lightbox

Selanjutnya tambahkan kode CSS berikut pada

.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;
}

2 agar tampilan galeri lebih rapi

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

.gallery img {
  cursor: zoom-in;
}

_

Oke sekarang mari kita uji

Coba buka HTML yang baru dibuat dengan browser dan coba klik gambar di galeri

Jadi hasilnya

Anda juga dapat menguji demo langsung

(klik

.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;
}

_5 untuk memperkecil)

Penyematan iframe dari https. // kodepen. io/ardianta/embed/abwqOqy?default-tab=hasil

Besar. 👍

Selanjutnya kita akan mencoba membuat tombol tutup

4. Membuat Tombol Tutup

Tombol Close berfungsi untuk menutup lightbox, sebenarnya tanpa tombol ini kita bisa menutup Lightbox dengan mengklik area background

Namun agar lebih menarik, mari tambahkan tombol tutup

Ubah 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 ke

.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;
}

2

.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

Jadi hasilnya

Demo Langsung

Penyematan iframe dari https. // kodepen. io/ardianta/embed/eYRVNPv?default-tab=hasil

5. Menambahkan Efek Transisi

Faktanya, kami telah menambahkan efek transisi ke lightbox

Coba perhatikan komponen lightbox. ada atribut

.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;
}

_7

Atribut

.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;
}

7 adalah atribut direktif untuk membuat transisi fade in dan scale up. Transisi otomatis dipilih berdasarkan kondisi elemen

Anda dapat membaca dokumentasi transisi Alpinejs di sini

Oke sekarang kita akan coba menambahkan transisi scale up untuk 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">&times;</button>
      <img :src="imgSrc" @click.away="lightboxOpen = false">
    </div>
  </div>
</div>

Perhatikan arahan

.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;
}

9 dan

<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>

0

.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;
}

_9 adalah arahan untuk transisi fade in;

<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>

0 adalah arahan untuk meningkatkan transisi

Sekarang silahkan coba lihat hasilnya

Demo Langsung

Penyematan iframe dari https. // kodepen. io/ardianta/embed/yLXvYBg?default-tab=hasil

Untuk menambahkan caption pada lightbox, maka kita harus merubah bentuk kode dari komponen lightbox

Tolong ubah menjadi 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 keterangan seperti ini

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

Setelah itu, ubah kode di 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 atribut

<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>

_3 disana kita melakukan dispatch custom event dengan parameter berupa objek

<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>

4

Objek ini akan digunakan di lightbox untuk membuat teks

Sekarang mari kita coba

Mantap, caption berhasil ditampilkan

Demo langsung

Penyematan iframe dari https. // kodepen. io/ardianta/embed/RwgQWrm?default-tab=hasil

Selain dengan cara ini, sebenarnya kita juga bisa mengambil caption dari atribut

<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>

5 dan

<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>