Cara Membuat Image Lightbox gallery Menggunakan FancyBox

Cara Membuat Image Lightbox gallery Menggunakan FancyBox

Lightbox Galeri membolehkan anda mencipta galeri gambar dalam kursus Moodle anda. Sistem Lightbox adalah sekumpulan skrip yang boleh digunakan untuk menerapkan pelbagai efek pada galeri gambar.

Apa itu Lightbox Gallery

Lightbox Gallery adalah sebuah sistem atau ciri yang digunakan untuk memaparkan gambar dalam bentuk pop-up interaktif dan menarik. Apabila pengguna mengklik pada gambar kecil (thumbnail), gambar tersebut akan diperbesar dalam tetingkap overlay tanpa perlu memuat semula halaman.

Cara membuat Lightbox gallery dengan FancyBox

Lightbox ialah ciri popular yang membolehkan anda memaparkan imej dalam pop-up yang elegan apabila diklik. Di dalam artikel ini, saya akan berkongsikan cara-cara mudah untuk manggunakan image lightbox gallery menggunakan FancyBox.

Langkah 1: Muat Turun atau Gunakan FancyBox CDN

Anda boleh menggunakan FancyBox secara langsung melalui CDN tanpa memuat turun fail. Tambahkan pautan berikut ke dalam fail HTML anda di dalam bahagian head:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css" />
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>

Langkah 2: Sediakan Struktur HTML

Gunakan struktur HTML asas untuk galeri imej. Tambahkan atribut data-fancybox untuk mengaktifkan lightbox.

Contoh:

    <div class="galeri">
        <a href="gambar1-besar.jpg" data-fancybox="galeri" data-caption="Gambar 1">
            <img src="gambar1-thumbnail.jpg" alt="Gambar 1" style="width: 150px; height: auto;">
        </a>
        <a href="gambar2-besar.jpg" data-fancybox="galeri" data-caption="Gambar 2">
            <img src="gambar2-thumbnail.jpg" alt="Gambar 2" style="width: 150px; height: auto;">
        </a>
        <a href="gambar3-besar.jpg" data-fancybox="galeri" data-caption="Gambar 3">
            <img src="gambar3-thumbnail.jpg" alt="Gambar 3" style="width: 150px; height: auto;">
        </a>
    </div>

Langkah 3: Tambah Css Style (mengikut keperluan)

Jika anda tidak memerlukan gaya tambahan untuk galeri anda, anda boleh melangkau bahagian CSS Style (step 2)

Berikut adalah css tambahan:

      <style>
        .galeri {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
        }

        .galeri img {
            width: 150px;
            height: auto;
            border: 2px solid #ddd;
            border-radius: 5px;
            transition: transform 0.3s;
        }

        .galeri img:hover {
            transform: scale(1.1);
            border-color: #007bff;
        }
    </style>

Kesimpulan

Dengan hanya beberapa baris kod, anda boleh menambahkan ciri lightbox menggunakan FancyBox dalam HTML. Libraryini memudahkan anda untuk mencipta galeri imej yang interaktif dan profesional tanpa banyak coding. Cubalah sekarang dan tingkatkan pengalaman pengguna laman web anda!

Summary

Artikel ini menerangkan langkah-langkah untuk membina galeri lightbox menggunakan FancyBox dalam HTML. FancyBox ialah library yang memudahkan anda memaparkan gambar dalam tetingkap pop-up yang interaktif. Langkah-langkahnya termasuk memasukkan CDN FancyBox, membina struktur HTML dengan atribut data-fancybox, menambah gaya CSS untuk mencantikkan galeri, dan menguji hasilnya di web.