Membuat Foto Gallery pada Website dengan FancyBox

Assalamualaikum Wr. Wb

Sahabat Webhozz dimanapun berada, apa kabarnya??? Mudah-mudahan sehat selalu dan selalu bahagia ya, amin.

Pada kesempatan kali ini, kita akan belajar Fancybox, salah satu librari dari JQuery.

Tapi kali ini kita akan coba versi terbaru dari fancybox. Mungkin dulunya kita bisa pelajari di http://fancybox.net/, dan sekarang versi terbarunya bisa kita kunjungi disini https://fancyapps.com/fancybox/3/.

Kali ini yang membedakan fitur dari fancybox yang terbaru ini adalah menyajikan berbagai jenis media baik itu foto maupun gambar, responsive, dapat disentuh alias discroll atau perbesar saat di hp smarthphone atau tablet, jadi dapat disesuaikan.

Oke langsung aja kita praktekkan.

1. Donwload file-file pendukungnya disini https://fancyapps.com/fancybox/3/.
2. Setelah didownload, extract filenya maka akan jadi folder dengan nama “fancybox-master”
3. Masuk ke dalam folder “fancybox-master” tersebut. Copy folder yang bernama “dist”.
4. Nah, di dalam folder “dist” tersebut berisi file-file pendukung yang kita butuhkan. Lalu buat folder projectnya (bebas mau dikasih nama apa).
5. Masuk ke dalam folder project buatan kita, lalu paste folder “dist” disitu.
6. Siapkan satu file gambar yang akan dijadikan objek. Lalu copykan dan paste di folder project yang kita buat.
7. Download juga JQuery versi terbaru. Lalu simpan file JQuery tersebut di file folder project.
8. Dalam folder project tersebut, buatlah file dengan nama “index.html”.
9. Ketikkan script html pada umumnya.

//===========================================
<!DOCTYPE html>
<html>
<head>
    <title>FancyBox</title>
</head>
<body>
    
    <h1>Belajar FancyBox</h1>


</body>
</html>
//===========================================

10. Panggil file-file pendukungnya pada tag .

//===========================================
<script src="jquery.js"></script>
<link rel="stylesheet" href="dist/jquery.fancybox.min.css">
<script src="dist/jquery.fancybox.min.js"></script>
//===========================================

11. Buat link gambar dan display gambarnya di file html.

//===========================================
<a data-fancybox="gallery" href="1.jpg">
   <img src="1.jpg" width="300" height="170">
</a>
//===========================================

12. Kemudian seperti inilah kode secara keseluruhan.

//===========================================
<!DOCTYPE html>
<html>
<head>
    <title>FancyBox</title>
    <script src="jquery.js"></script>
    <link rel="stylesheet" href="dist/jquery.fancybox.min.css">
    <script src="dist/jquery.fancybox.min.js"></script>
</head>
<body>
    
    <h1>Belajar FancyBox</h1>

    <a data-fancybox="gallery" href="1.jpg">
        <img src="1.jpg" width="300" height="170">
    </a>

</body>
</html>
//===========================================

13. Dan seperti inilah hasil akhirnya.