Cara Menambahkan Image Lightbox dengan Fancy Box

√ Cara Menambahkan Image Lightbox dengan Fancy Box

  • Posted by:
  • Posted on:
  • Category:
    Blogger, PendidikanBlogger, Pendidikan
  • System:
    Unknown
  • Price:
    USD 0
  • Views:
    314 views


Cara Menambahkan Image Lightbox dengan Fancy Box

Kali ini Arlina Code akan berbagi tutorial Cara Menambahkan Image Lightbox dengan Fancy Box di blog. Apa itu Fancy Box? Fancy Box adalah sebuah JavaScript lightbox library yang dikembangkan oleh Fancyapps yang bisa sobat manfaatkan untuk mempresentasikan segala jenis media dengan tampilan yang menarik dan juga responsive.

Cara Menambahkan Image Lightbox dengan Fancy Box

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 :

Cara Menambahkan Image Lightbox dengan Fancy Box

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.



Source link


Rating

0

( 0 Votes )
Please Rate!
√ Cara Menambahkan Image Lightbox dengan Fancy Box

No votes so far! Be the first to rate this post.

As you found this software useful...

Follow us on social media!

Leave a Reply