Fancy Box merupakan sebuah code JavaScript lightbox library yang dikembangkan oleh https://fancyapps.com/ yang bisa kalian gunakan pada website kalian untuk menampilkan gambar agar lebih menarik dan responsive.Terus bagaimana cara memasangnya? Tenang saja kali ini aku akan membagikan tutorial tentang Cara Menambahkan Image Lightbox dengan Fancy Box.
Sebenarnya Fancy Box juga mempunyai fitur fitur yang bagiku sangat menarik sekali contohnya:
- Autoplay slideshow
- Fullscreen
- Zoom
- Share
- Download
- Navigasi untuk gambar
Biasanya Fancy Box ini digunakan untuk konten iFrame, modal box video, dan berbagai konten lainnya. Tapi aku hanya akan membagikan tutorial tentang Fancy Box hanya untuk pengganti Image Lightbox default dari Blogger.
Aku menyarankan untuk mematikan Fancy Box default dari blogger dulu sebelum kalian memulai tutorial pemasangan Lightbox dengan Fancy Box kali ini, contohnya seperti gambar dibawah ini :
Pastikan template pada website kalian sudah terpasang jquery seperti di bawah ini, tapi jika belum terpasang kalian bisa memasang jquery di bawah ini tepat di atas code </body> :
<script src='https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js'/>Atau
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>Cara Menambahkan Image Lightbox dengan Fancy Box
Buka Blogger > Klik menu Tema > Klik Edit HTML > Setelah itu kalian cari dan tambahkan code di bawah ini sebelum code </head>
<b:if cond='data:view.isSingleItem'>
<style>
@media screen and (max-width:640px) {
body .fancybox-slide--image{overflow-y:scroll}}
</style>
</b:if>Lalu tambahkan code di bawah ini tepat di atas code se </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/fancybox@3.5.7/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/fancybox@3.5.7/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>Jangan lupa perhatikan code yang sudah aku tandai di atas, kalian bisa mengeditnya jika code di atas berbeda dengan markup yang ada di website kalian. Karena setiap website terkadang memiliki code markup yang berbeda dari yang lain.
kalian bisa melihat hasilnya di Result berikut ini, untuk melihatnya kalian bisa langsung klik pada gambar di link Result di bawah ini.
Ok, begitulah tentang Cara Menambahkan Image Lightbox dengan Fancy Box. Selamat mencoba dan dan semoga bisa berhasil di website kalian 😊.