Cara Menambahkan Image Lightbox dengan Fancy Box
Snippet Tips Blogger
Fancy Box memiliki beberapa fitur yang menarik seperti autoplay slideshow, fullscreen, zoom, share, dowload dan juga navigasi untuk gambar. Fancy Box juga bisa digunakan untuk keperluan lain seperti menampilkan konten modal box video, iFrame, dan lainnya. Namun di sini saya hanya akan berbagi Fancy Box sebagai pengganti Image Lightbox standar dari Blogger.
Sebelum menambahkan Fancy Box sebaiknya sobat menonaktifkan dahulu Image Lightbox standar Blogger seperti ini :
Dan juga pastikan di blog sobat sudah memasang jQuery library seperti ini
<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
Pertama, buka Blogger > Klik menu Tema > Klik 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/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>Edit kode yang ditandai jika di tema blog sobat memiliki markup yang berbeda
Setelah itu Simpan tema dan lihat hasilnya di blog sobat.
Untuk menelusuri fitur menarik lainnya sobat bisa mengunjungi link pengembangnya di https://fancyapps.com/fancybox/3/
Itulah dari Arlina Code untuk postingan Cara Menambahkan Image Lightbox dengan Fancy Box. Selamat mencoba dan wassalam.