Bagi yang belum tau apa itu lightbox, saya akan sedikit jelaskan dulu secara singkat. Jadi Lightbox itu intinya, gambar yang ketika kita klik akan... Cara Membuat Image LightBox Menggunakan Fancybox

Bagi yang belum tau apa itu lightbox, saya akan sedikit jelaskan dulu secara singkat. Jadi Lightbox itu intinya, gambar yang ketika kita klik akan muncul popup. Untuk lebih jelasnya kita bisa lihat gambar contoh lightbox dibawah ini.

Contoh tampilan fancybox

Contoh tampilan fancybox

Ok, sekarang kita akan coba untuk membuat image lightbox.
1. Download fancybox dialamat ini: http://fancyapps.com/fancybox/3/ Kalau saya lebih senang download dari github, caranya klik tombol “Github” yang ada di pojok kanan atas. Lalu setelah masuk halaman “Github” tinggal klik “Clone or download”.

Download Fancybox on github

Download Fancybox on github

2. Setelah di download, lalu extract hasil download tadi di folder localhost kita. Kalau kita menggunakan linux, foldernya ada di path ini: /var/www/html/. Dalam tutorial ini, saya menyimpannya di directory “/var/www/html/belajar-php/tuts-fancy/”

Directory fancybox

Directory fancybox

3. Ok, selanjutnya kita membuat file “view” atau halaman untuk memunculkan gambar dan fancybox nya. Caranya buat file dengan nama “tes-fancy.php” di folder tempat kita menyimpan konten website kita. Seperti yang saya sebutkan diatas, dalam tutorial ini saya menyimpan nya di directory “/var/www/html/belajar-php/tuts-fancy/”. Lalu isi dengan code dibawah ini.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My page</title>

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
</head>
<body>

    <a href="images/kalilinux.jpg" data-fancybox="images" data-caption="Satu Gambar">
    <img src="images/kalilinux.jpg" alt="Gambar kali" width="200px"></a>
    
    <a href="images/kali-wall.png" data-fancybox="images" data-caption="Dua Gambar">
    <img src="images/kali-wall.png" alt="Gambar kali" width="200px"></a>

    <!-- Your HTML content goes here -->

    <!-- JS -->
    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="jquery.fancybox.min.js"></script>
</body>
</html>

Fancybox sourcecode
4. Sebelum ke tahap berikutnya, kita bisa lihat sourcecode fancybox pada gambar diatas (ingat lihat gambar ya! 🙂 ), pada baris ke 8, 21 dan 22. Script CSS dan JS nya sejajar dengan file “tes-fancy.php” yang kita buat sebelumnya. Maka kita pindahkan atau salin file-file ini “jquery.fancybox.min.css” dan “jquery.fancybox.min.js” dari folder “dist” yang ada di dalam folder fancybox yang kita download diawal tadi. Sehingga file “CSS” dan “JS” menjadi sejajar atau dalam satu folder dengan file “tes-fancy.php”.

Fancybox on dist folder

 

Script JS dan CSS yang sejajar dengan script halaman

5. ok, setelah semua script sejajar. Kita tinggal munculkan gambar menggunakan “TAG” “<img>” yang disematkan link ke gambar yang akan muncul di lightbox. Biasanya yang muncul di lightbox itu lebih besar ukuran nya. Tapi dalam tutorial kali ini, gambar thumbnail dan view saat lightbox menggunakan gambar yang sama. Lihat baris 12-16 pada gambar sourcecode di point ke 3 sebelumnya.

6. Jika semua point diatas sudah diikuti dengan benar, maka kita sudah berhasil. Dan hasilnya akan seperti pada screenshoot dibawah ini.

Halaman yang sudah selesai
Dan ketika kita klik gambarnya, maka akan muncul seperti dibawah ini.

Contoh tampilan fancybox

Gimana..? mudah kan..? 🙂 Silahkan temen-temen eksplorasi kembali.
Dan bagi yang ingin melihat yang lebih detail, nanti saya akan coba buatkan video tutorialnya. 🙂

Terimakasih.

Please follow and like us:

No comments so far.

Be first to leave comment below.

Your email address will not be published. Required fields are marked *

Social media & sharing icons powered by UltimatelySocial