Cara Membuat Pop Up Gambar (Image Lightbox) di Blogger Menggunakan Fancy Box

Saifulah.id - Gambar Pop Up atau Lightbox Gambar adalah fitur bawaan dari Blogger yang berfungsi untuk menampilkan semua gambar dalam postingan agar menjadi slide show yang bisa diperbesar dan digeser ke kiri dan kanan, baik menggunakan mouse maupun keyboard.

Manfaat Menggunakan Lightbox Gambar

1. Fiturnya Banyak
   Zoom: Memperbesar dan memperkecil gambar dengan mudah.
   Autoplay: Mainkan gambar dengan slideshow tanpa menyentuh tombol sedikitpun
   Thumbnail: Buka seluruh gambar dalam postingan dalam satu tempat
   Arrow: Ganti gambar ke slide sebelumnya atau selanjutnya.
   Overlay: Tampilkan gambar di atas postingan, tanpa membuka tab baru.
   
   
2. Tampilan Lebih Elegan / Profesional
   Lebih enak dipandang dan terkesan bukan blog abal-abal
   
   
3. Cocok Untuk Postingan Yang Memuat Banyak Gambar
   Paling bagus digunakan pada blog yang yang membahas tentang penginapan, travel perjalanan, wisata, galery, dll. Karena blog seperti ini biasanya memuat banyak gambar dalam satu postingan.
   
   
4. Mempercepat Pengunjung
   Tanpa menggunakan Lightbox (Pop up gambar), pengunjung akan kesulitan melihat gambar dalam tampilan full size secara bersamaan. Karena mereka diperlambat oleh proses loading. Sementara jika kita menggunakan Lightbox, maka melihat seluruh gambar dalam tampilan penuh akan lebih cepat dan menarik.

Cara Menambahkan Image Lightbox dengan Fancy Box

Dikarenakan Lighbox dari Blogger sudah tidak berfungsi, maka kita akan membuat Lightbox baru menggunakan Fancy Box. Fancy Box adalah sebuah JavaScript Lightbox Library yang dikembangkan oleh Fancyapps.

A. Non-aktifkan Lighbox gambar bawaan Blogger

1. Buka Blogger
2. Klik Setelan
3. Matikan centang hijau pada Lightbox gambar sampai berubah jadi abu-abu
   

B. Pasang jQuery Library

1. Buka Blogger
2. Klik Tema
3. Pilih Edit HTML
4. Pastikan di dalam blog sudah di pasang kode berikut:
   

   <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js'/>

   atau
   

   <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>

5. Jika salah satu dari kode di atas tidak ada di dalam template, salin dan tempel kodenya di atas kode </head>

C. Pasang kode CSS

1. Letakkan juga kode berikut di atas kode </head> atau <head/>
   

   <b:if cond='data:view.isSingleItem'>

   <style>

   @media screen and (max-width:640px) {

   body .fancybox-slide--image{overflow-y:scroll}}

   </style>

   </b:if>
2. Maka hasilkan akan seperti ini
   

   <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js'/>

   
   

   <b:if cond='data:view.isSingleItem'>

   <style>

   @media screen and (max-width:640px) {

   body .fancybox-slide--image{overflow-y:scroll}}

   </style>

   </b:if>

   
   

   </head>

D. Pasang Javascript

1. Cari kode </body>
2. Letakkan kode berikut tepat di atas </body>
   

   <b:if cond='data:view.isSingleItem'>

   <script>

   //<![CDATA[

   // Lazy Fancy Box

   var lazyfancybox=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyfancybox||0!=document.body.scrollTop&&!1===lazyfancybox)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyfancybox=!0)},!0);

   // CSS Fancy Box

   function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }

   loadCSS("https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css");

   // Fancybox Setting

   $(document).ready(function(){$(".post-body img").parent("a:not(.no-lightbox)").each(function(){$(this).attr("src",$(this).find("img").attr("src")),$(this).attr("data-fancybox","postimages")}),$(".post-body img").parent("a:not(.no-lightbox)").fancybox({margin:[50,0],onComplete:function(t,o){t.scaleToActual(0,0,0),console.log(t)}})});

   //]]>

   </script>

   </b:if>
3. Ganti kode yang ditandai warna biru jika template blog anda menggunakan class yang berbeda.
4. Simpan Tema

Lihat live demo tampilan dari Lightbox dan silakan pesan jasa pemasangannya jika anda tidak bisa membuatnya sendiri.

Demo Lightbox Pesan Jasa Editor

Kekurangan Menggunakan Lightbox dari Fancy Box

Meskipun Lightbox dari Fancy Box memiliki banyak manfaat, namun karena kita tidak menggunakan Lightbox versi bawaan Blogger, maka terdapat kekurangan di dalamnyadiantaranya:

1. Jika jQuery Library tidak diurai, maka akan mempengaruhi skor Kecepatan (Performance) blog.
   
2. Jika jQuery Library diurai, maka akan mempengaruhi skor Praktik Terbaik (Best Practice).