How to Add Image Lightbox with Fancy Box New | Dn420

This time Dn420 will share a tutorial on How to Add a Lightbox Image with Fancy Box on the blog. leats do it...

 What is Fancy Box? 

Fancy Box is a JavaScript lightbox library developed by Fancyapps that you can use to present all types of media with an attractive and responsive appearance easily.

Best Features of  Fancy Box?

Fancy Box has some more interesting features such as autoplay slideshow, fullscreen, zoom, share, download, and also navigation for all images. Fancy Box can also be used for other purposes such as beautiful displaying modal box video content, amazing iFrames, and others. But here we will know only share Fancy Box as a replacement for the standard Image Lightbox from only for Blogger.

Before adding Fancy Box, you need to disable Blogger's standard Image Lightbox 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 Image Lightbox with Fancy Box on blogger?

For that you need First, open Blogger Dashboard> then Click the Theme menu > Click Edit HTML  next customize > 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 below code just before </body> tag

<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>

.post-body You need to Edit the marked code if your blogger theme has different markup

When All Prosses are done After that, make sure to save the theme and see the results on your blog.

Conclusion:

Thanks for reading this How to Add Image Lightbox with Fancy Box New | Dn420 post for so long. If you have an opinion, don't forget to let us know in the comments. And if the post seems helpful, don't forget to heal your friends. Thanks.

Go to Link