Thursday, 6 August 2020

How to Add Lightbox Image with Fancy Box

How to Add Lightbox Image with Fancy Box

How to Add Lightbox Image with Fancy Box
Thursday, 6 August 2020

This time Bloghint will share a tutorial on How to Add Image Lightbox with Fancy Box on the blog. What is a 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 display.

Fancy Box has several interesting features such as autoplay slideshow, fullscreen, zoom, share, download and also navigation for images. Fancy Box can also be used for other purposes such as displaying video box modal content, iFrame, and others. But here I will only share Fancy Box as a replacement for the standard Image Lightbox from Blogger.

Before adding Fancy Box you should first deactivate Blogger's standard Light Lightbox like this:

How to Add 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 Lightbox Image with Fancy Box


First, open Blogger > Click the Themes 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 code marked if the theme on your blog has a different markup

After that Save the theme and see the results on your blog.


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

That's from Arlina Code for the post How to Add Image Lightbox with Fancy Box . Good luck and greetings.
How to Add Lightbox Image with Fancy Box
4/ 5
Oleh

Comments