Cara Menambahkan Image Lightbox dengan Fancy Box di Blogger

Cara Menambahkan Image Lightbox dengan Fancy Box di Blogger

Cara Menambahkan Image Lightbox dengan Fancy Box
AdityaTekno.com
- Cara Menambahkan Image Lightbox dengan Fancy Box di Blog. Fancy Box yaitu sebuah JavaScript lightbox library yang dikembangkan oleh Fancyapps yang bisa anda manfaatkan untuk mempresentasikan segala jenis media dengan tampilan yang menarik dan juga responsive.

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/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 >>  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/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 anda memiliki markup yang berbeda
Setelah itu Simpan tema dan lihat hasilnya. 
Demikian artikel Cara Menambahkan Image Lightbox dengan Fancy Box. Semoga bisa bermanfaat dan terima kasih sudah berkunjung. Salam AdityaTekno.com

sumber :
https://www.arlinacode.com/2020/07/cara-menambahkan-image-lightbox-dengan-fancy-box.html