Cara Menambahkan Image Lightbox dengan Fancy Box di Blogger

Tidak hanya itu, Fancy Box memiliki beberapa fitur yang menarik seperti autoplay slideshow, fullscreen, zoom, share, download dan juga navigasi untuk gambar. Fancy Box juga dapat digunakan untuk keperluan lain seperti menampilkan konten modal box video, iFrame, dan lainnya. 

Tapi, di sini saya hanya akan berbagi Fancy Box sebagai pengganti Image Lightbox standar dari Blogger. Nah, sebelum menambahkan Fancy Box sebaiknya anda menonaktifkan dahulu Image Lightbox standar Blogger. Caranya buka Setelan >> Postingan >> Lightbox gambar >> nonaktifkan. Dan juga pastikan di blog anda juga sudah memasang jQuery library seperti ini

<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'/>

Cara Menambahkan Image Lightbox dengan Fancy Box

Pertama, buka Blogger >>  Tema >> Edit HTML >> Kemudian cari dan tambahkan kode di bawah ini sebelum </head>

<b:if cond='data:view.isSingleItem'>
<style>
@media screen and (max-width:640px) {
body .fancybox-slide--image{overflow-y:scroll}}
</style>
</b:if>

Kemudian tambahkan kode di bawah ini tepat sebelum </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>

Edit kode yang ditandai jika di tema blog anda memiliki markup yang berbeda

Setelah itu Simpan tema dan lihat hasilnya. 

Result 

Demikian artikel Cara Menambahkan Image Lightbox dengan Fancy Box. Semoga bisa bermanfaat dan terima kasih sudah berkunjung. Salam AdityaTekno.com