Cara Menambahkan Image Lightbox dengan Fancy Box di Blogger

Cara Menambahkan Image Lightbox dengan Fancy Box di Blog. Fancy Box yaitu sebuah JavaScript lightbox library yang dikembangkan oleh Fancyapps.
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
Hi, Aku Aditya Nur Kahfi, biasa dipanggil Adit. Seorang Blogger, Content Writer, CEO & Founder AdityaTekno.com dan juga Editor/Redaktur di Portal Berita Lokal iNews.id - iNewsBekasi.id.

4 komentar

  1. ahirnya ketemu yang d cari.. thanks for share
    1. Terimakasih kembali kak. Semoga membantu ya.
  2. maaf gan ini maksudnya apa ya = Edit kode yang ditandai jika di tema blog anda memiliki markup yang berbeda
    1. Di atas sudah saya tandai kan mas kodenya, kode ini yg dimaksud .post-body img. Jadi, kalo kode .post-body nya berbeda dengan yang di template agan, harus diganti sesuai yang ada di template agan.