How To Add Lightbox Image With Fancy Box In Blogger

This time Blog Faters will share the tutorial on How To Add A Lightbox Image With Fancy Box On The Blog. What is Fancy Box? Fancy Box is a JavaScript
How to Add a Lightbox Image with Fancy Box

Add Lightbox Image With Fancy Box In Blogger

This time Blog Faters will share the tutorial on How To Add A Lightbox Image With Fancy Box On The Blog. What is Fancy Box? Fancy Box is a JavaScript LIGHTBOX LIBRARY developed by FancyApps which you can use to present all types of media with attractive and responsive views.

Fancy Box has several interesting features such as autoplay slideshow, fullscreen, zoom, share, download and also navigation for images. Fancy Boxes can also be used for other purposes such as displaying capital box, iframe, and other capital content. But here I will only share the Fancy Box instead of the standard image lightbox from blogger. 

Before adding a Fancy Box, you should disable the Image Lightbox standard blogger standard like this:


How to Add a Lightbox Image with Fancy Box


And also make sure on your blog you have installed the jQuery library like this

<script src='https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js'/>
Or
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>

How to Add a Lightbox Image with Fancy Box

First, open Blogger > Click the Theme Menu > Click Edit HTML > Then find and add the code below before </head>
<b:if cond='data:view.isSingleItem'>
<style>
@media screen and (max-width:640px) {
body .fancybox-slide--image{overflow-y:scroll}}
</style>
</b:if>
Then add the code below just before </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 the marked code if your blog theme has different markup

After that, save the theme and see the results on your blog.


Result


To explore other interesting features, you can visit the developer link at https://fancyapps.com/fancybox/3/

That's from Blog Faters Code for the post How to Add a Lightbox Image with Fancy Box.  Good luck and greetings.

Words can inspire, thoughts can provoke, but only action truly brings you closer to your dreams.

Post a Comment

© Blog Faters. All rights reserved. Developed by Jago Desain