Notification texts go here. Contact Us Buy Now!
$10.00
10
$000

Get your blog ready With details you won't find anywhere.

blogger widgets | How To Install Fancybox Feature On Blogger/Blogspot

abdalrahman
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

install-fancybox-feature-on-blogger-blogspot


What is FancyBox?

FancyBox is a tool for displaying images, HTML content , and multimedia in a floating Mac-style "lightbox" on a web page. It is built using the jQuery library

It is a combination of JavaScript , CSS and some images that allows you to animate modal using the jQuery JavaScript framework.



Features of this version of FancyBox:

  • Has automatic slideshow
  • Full screen mode
  • Zoom
  • And show a list of photos

Steps to add it to Blogger:

On Blogger dashboard, Select Theme Edit HTML

Step 1: Add the jQuery library

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

Step 2: Add the code to the blog

CSS

<b:if cond='data:view.isSingleItem'><style>@media screen and (max-width:640px) {body .fancybox-slide--image{overflow-y:scroll}}</style></b:if>

Find the </head> tag and paste the above CSS above the </head> . tag

Javascript

Find the </body> code on your blog and place the code below just above the </body> code .

<b:if cond='data:view.isSingleItem'><script>//<![CDATA[// Lazy Fancy Boxvar 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 Boxfunction 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>

Replace the red highlighted .post body with the class image of the template you are using.
If you have any problems, please comment below. Good luck.
Read Also

Getting Info...

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.