FancyBox 3 Image Lightbox & Slider for Blogger.com Blogs

Lot of us posts photos on our blogs daily and being able to view it in light box / gallery view is a basic function for every blog and Blogger does provide one but one that is very old and needs an upgrade so we have decided to post this tutorial to help you add FancyBox 3 in your blogger blog.


FancyBox 3 is an image / content light-box plugin that provides the feel of a modern and responsive website. If you have had experience with the Blogger's default light-box feature you may have felt that it is very basic and for a blog that focuses more on photos and images it might not be the best option.

Demo & Comparison

For example, here we have two photos, the first one is set to open in Blogger's default light-box and the other is the FancyBox light-box plugin.

Here's a demo on a test blog - Demo for Image Lightbox 

Images with Blogger's Default Lightbox

  

Images with FancyBox 3 Lightbox

  

The jQuery plugin, FancyBox plugin is more than just a image lightbox / gallery, it can do a lot more than just images but in the Blogger environment we will be just focusing on images because that is what we need here.

Here are a few attractive features of the FancyBox plugin -

1. Modern design and feel
2. Responsive and touch enabled, works flawlessly on mobile devices. 
3. Full screen and zoom option
4. Slideshow option for multiple images in a gallery (i.e a post in Blogger blogs)
5. Very flexible - if you know basic HTML / JavaScript you can do a lot more with this plugin. 

Setting it up

Note: Before starting consider taking a backup of your current Blogger template

The FancyBox 3 plugin is a jQuery based plugin and for it to work jQuery needs to be added to your template as well though many templates (most likely if it is a third-party template or you have previously added such plugins) may already have jQuery added into it and it is not recommended to add it again as that just makes the page load the same thing twice which is not good for the performance of a website. 

Check if you already have jQuery:

In this tutorial we will be asking you to add certain script files required for the plugin to work, jQuery code too, though if you already have it on your blog then avoid adding it again is the best option.

To check whether you have jQuery or not follow these steps -

1. Go to your Blogger Dashboard > Themes
2. click on Edit HTML 
3. open in-page search CTRL+F/CMD+F and enter the keyword "jquery"
4. Does it take you to a line with "<script src='.../jquery.min.js' " (may look similar) ? If yes then you already have jQuery
5. And if not then you do not have it, so in the next steps be sure not to omit the jQuery script. 

Adding the scripts and stylesheets

The Fancybox plugin is a lightweight jQuery plugin with a lot of functionalities. It depends on jQuery to work, and a stylesheet that tells the browser how to display things under it, in total there are 3 files we will be adding, namely - jQuery, FancyBox Script and FancyBox Stylesheet. 

Note: If you already have jQuery in your template it is recommended you remove the line from the following HTML markup that adds the jQuery script. 

Copy the following HTML snippet, 

<!-- FancyBox CSS -->
<link href="//cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" rel="stylesheet" type="text/css"/>

<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- FancyBox 3 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>

Upon copying paste it in a Notepad / TextEdit application. When you have the code snippet in a text editor remove the line with <!-- jQuery --> and the line after that if you found that jQuery already exists in your template, else keep the whole code without making any changes. 

To add it in the template, 

1. Go to your Blogger Dashboard > Theme
2. Click on the Edit HTML button on the page
3. search for </body> 
4. Paste the code immediately above the </body> tag
5. Save the theme.

The </body> tag is basically the end of the body of the page and that is where we are adding the scripts because such scripts are run only when the complete HTML has been loaded. 

In case you already had jQuery in your template and you deleted the jQuery from our code then do remember that these scripts should always come after the jQuery's script, adding them before it may result in error. This is a common mistake people make, and confirming this can save you a lot of time in figuring out what went wrong.

Disable Blogger's Lightbox

The codes we added in the previous section has no effect on your images now and that's normal, we haven't initialized the scripts so you wouldn't be able to open it using FancyBox lightbox plugin as for now, we will be doing that shortly, but before that make sure you turn off Blogger's default image lightbox as it may conflict with the one we've added.

1. Go to your Blogger Dashboard
2. Settings > Posts, comments and sharing settings
3. Next to "Showcase images with Lightbox" choose "No" from the dropdown list. 
4. click on the "Save settings" button on the top right of the page.

Great, now the lightbox from Blogger is disabled and we can continue on activating our new lightbox plugin. 

Activating the plugin on photos / images

Without specifying which images is to be activated in lightbox we assume that all images inside of the post body that has links to an image is supposed to open in the lightbox. 

It is important for us to tell the plugin that "Hey, don't have effect on images outside of the post body" that's because there are many images all over the blog that you don't want to be opened in the lightbox so we isolate the plugin within the post body. 

Copy the following code,

<script type="text/javascript">
//<![CDATA[
 $(document).ready(function(){
   /**************************
   This part makes sure we select only the images and photos that is supposed to appear in a lightbox
   **************************/
   $(".post-body a img").each(function(){
     var isImage = /\.(?:jpg|jpeg|gif|png)$/i.test( $(this).parent("a").attr("href") );
    
     if ( isImage ) {
       $(this).parent("a").attr('data-src', $(this).parent("a").attr("href"));
       $(this).parent("a").attr('data-fancybox', 'postLightBox' );
     }
    
     else {
       // .. do nothing
     }
   });
  
  
   /**************************
   This part initializes FancyBox on the qualifying images
   **************************/
   var options = {
       infobar  : true,
       buttons  : true,
       speed    : 300,  // Animation duration in ms
      margin : [40, 20] // Space around image, ignored if zoomed-in or viewport smaller than 800px
   };
  
   $("[data-fancybox]").fancybox( options );
 });
//]]> 
</script>

You have to add this code after the line of code we added in the "Adding the scripts and stylesheets" part of the tutorial.

1. Go to your Blogger Dashboard > Theme
2. Click on the Edit HTML button on the page
3. search for </body> 
4. Paste the code immediately above the </body> tag 
5. Save the theme.

It's time to test it! After saving the theme open up your blog and go to a post with images and click on the image and it should now be opened in the new modern light box rather than the old one Blogger provides initially.

Have questions? 

You might have questions about the plugin or something about it that isn't working as you expected, we've put down some common questions and its answers for you - 

Is FancyBox safe to use?

Yes, it is one of the most popular jQuery plugin for content lightbox on the web and it is used by hundreds of thousands of websites. 

Learn more about it on FancyBox's homepage.

Would it work in the new Blogger themes?

Yes, it is supposed to work perfectly in the newer themes. If you are facing issues with any theme please comment down below with your blog URL and we will take a look.

As for third-party customized themes we cannot guarantee.

How can I make it work only on the images I want it to?

The part $(".post-body a img").each(function(){ in the code that activates tells the plugin which images to choose and by default it activates on all images inside of a post body. 

If you want it to work only on certain images and not all then follow these steps 

1. Open your blog post in the post editor and click on the HTML button next to the Compose button 
2. When you are in the HTML mode, look for the image's code which might be something like
   
   

   <a href="[.....]"><img src=" [.....] "/></a>

   
   To the <a> tag add a specific class name value to it, for e.g
   
   

   <a class="lightbox-image" href="[.....]"><img src="[.....]"/></a>

   
   You can notice we added class="lightbox-image" to the <a> element.
   
3. In the JavaScript snippets change
   
   

   $(".post-body a img").each(function(){

   
   to
   
   

   $("a.lightbox-image").each(function(){

   
   And save it to the template code.
   

Now images which is inside an anchor link i.e <a> tag that has a class name that you defined, here we used "lightbox-image" (you can use anything else that starts with an underscore or an alphabet).

I would like to add captions to my lightbox images, how do I do it?

Caption that you want to appear for a image should be manually added in the source of the image's HTML code. Here's how you can,

1. Open the post in the post editor and switch to the HTML mode 
2. Look for an image's HTML code, at minimum it would look like this
   
   

   <a href="{image-url}" >
   <img href="{image-url}"  />
   </a>

   
   
3. Add data-caption="Your caption here" to the <a> of the image, e.g
   
   

   <a data-caption="This is a caption of the image" href="......." >
   <img href="........"  />
   </a>

   
   
4. Save the post. 

Basic HTML is supported inside of the data-caption attribute, so you can add italic, bold or large text inside of the caption as well.

I want to customize it according to my needs, how do I do it?

If you have a good knowledge of JavaScript, HTML and CSS then you can head over to the plugin's homepage and take a look at the documentation to learn how to customize it - http://fancyapps.com/fancybox/3/

Not everyone is a coder we understand but to customize it according to ones' needs some advanced knowledge is needed. You can hire or ask a web developer / designer to help you out.

If your need is not big and what you want can be achieved by simply modifying a few codes here and there I can provide your free of cost help though in case it requires good amount of time and work I am available for hire as well. You can contact me at depy45631@gmail.com for any help or hiring me for a work.

Anything else?

For feedback, suggestions and requests please comment down below. 

Responsive Videos In Posts on Blogger

YouTube. Dailymotion, Vimeo.. who doesn't like to spend time on these sites. Chances are you embed videos from these platforms on your blog, but the worst thing? It doesn't fit on mobile devices, that too even if you are using a responsive template.

Why is it important to make sure videos fits properly on mobile devices? If you would have asked this question about even just half a decade back we would said that it is not important, though times are changing a lot faster, majority of your readers maybe on some kind of mobile devices and that is why responsive web is such a big break-through in the internet World. 

Question arises: How do I make sure videos on my blog, from either YouTube, Vimeo, Dailymotion (.. or other sources) properly fit on my blog page when viewed from a mobile device.

Before we begin the tutorial, we would like you to understand that this tutorial is meant for those blogs which uses a responsive web design approach, mostly the default blogger templates aren't those, and following this tutorial would bring nothing good, it would not bite, but wouldn't bring you any good either.

Tutorial Begins

FitVidsJS is a lightweight jQuery plugin that works very well in making videos fluid i.e fit with the width of the container, from many popular platforms (..and also other platforms that you can specify).

Demo - Fluid Videos
Demo it didn't happen.

While you are on the demo page, try reducing the size of your browser window and see how the video responds to the re-size event and adapts itself accordingly.

Back it up: Before you begin with the steps, I recommend you to backup your blogger template as we will make changes to the template, and if anything goes wrong you can always revert back using the backed-up template file.

Adding jQuery

It is a JavaScript framework that is used for various tasks like DOM manipulation, AJAX and other technical stuffs that helps make it easier to make a website interactive with JavaScript. The FitVids plugin is a jQuery plugin which means it would not work if you do not load jQuery.

Check if you already have jQuery added Chances are that your template may already contain a version of jQuery (many do), it is not recommended to add jQuery twice, so check if you have jQuery already installed. How to do that :-

Go to the Blogger Dashboard -> Template -> Edit HTML -> Use CTRL+F or ⌘+F and search for the keyword 'jquery', go through the found instances and see if you have something similar to this:

<script type="text/javascript" src="https://....../jquery.min.js"></script>

If you do not have jQuery, add it - To add jQuery from Google's CDN, follow these steps:

1. Go to your Blogger Dashboard -> Template -> Edit HTML
2. Use CTRL+For⌘+F search for </head>
3. Copy the following line of code, which is the script tag to include jQuery library in your blog -
   

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
   

   
   That's it. Now it must look something like this in the template code editor
   

   

   Adding jQuery's code snippet in Blogger template.

4. Press the orange "Save Template" button to save it. 

Once it is done you may proceed to the next section to add the FitVids plgun. Adding it is almost similar to adding jQuery. Keep the template editor open, we need it for the next two steps too!

The main FitVidsJS plugin

It's time to add the JavaScript/jQuery plugin. We will add it from a CDN, that makes sure that the files load fast and doesn't impact on the performance of your blog.

Before we go on further, copy this script tag which we need in the steps mentioned next:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.1.0/jquery.fitvids.min.js"></script>

1. Go to your Blogger Dashboard -> Template -> Edit HTML
2. Use CTRL+For⌘+F search for </head>
3. Paste the copied code immediately before line where </head> is.
   
   It is important that we put this script tag after the jQuery tag (wherever it is in the template), so if you already have jQuery somewhere else in the template consider putting this tag below it. These tags can be added anywhere, in the head, or even at the end of the body.
4. Following is an example of how it must look like after you have added it to the template. Note that the plugin code i.e Fitvids script tag must always be placed after jQuery's for it to work.
   
   

Save the template. Yay! We now have jQuery & FitVids plugin added in our template. The final part is initializing the plugin so that it works upon the videos in your posts, and also other parts if you intend to use it for advance purpose.

Initialize the plugin - Fitvids

Once we have the script tags in place we have to tell it to initialize the function on the videos, the plugin can't guess where do you have your videos, or which videos do you intend to make responsive so we have to specify it.

We will provide different initialization code for different applications i.e if you want the plugin to work on all videos on your posts, or if you want it to work on some some that you can specify. It gives you more control over what you want to be handled by this plugin.

Choose the right initialize code and continue with the step to add it to your template (which is same as adding the script tags in the above steps, you just have to put the following codes below any script tags we added)

1. All videos in posts, or (recommended)

The code uses the class of the body of the post to identify which part of the page it must handle, mostly blogger templates include the class name "post-body" in the container of the post and assuming that your template does the same you can use this to initialize the plugin on all the videos in every posts.

<script type="text/javascript">
  $(document).ready(function(){
    $(".post-body").fitVids();
  });
</script>

On the line 3 you can change .post-body to the class name you want to target. Most blogger templates this class name for posts, so this code may work right out of the box without any changes.

2. Only some videos, or

If you do not want every video in your post be handled, then you can specify the ones you want to. 

<script type="text/javascript">
  $(document).ready(function(){
    $(".fit").fitVids();
  });
</script>

This version of the code works only on the videos wrapped inside a container with the class fit. It gives you a control over the videos you want to make responsive. As it has been said it needs to be wrapped inside a container, it means that your embed code must be put inside an element like this:

<div class="fit">
    <iframe src="...[embed code]" width="xxx" height="xxx">
</div>

So while you are including a video somewhere in your post you always have to make sure you wrap it inside this code.

3. All, but not some

The third option is to have selective videos not being handled by the plugin, all videos will become responsive i the posts except for the ones you specify.

<script type="text/javascript">
  $(document).ready(function(){
    $(".post-body").fitVids({ ignore: '.not-fit'});
  });
</script>

When you do not want a video to be handled by the plugin, you can just wrap its code inside a div element with the class not-fit (notice the .not-fit in the code above). This is how you can wrap the embed code for the video inside the element, and then paste it in your post:

<div class="not-fit">
    <iframe src="...[embed code]" width="xxx" height="xxx">
</div>

And then put and code in place,

Choose an initialization script from any of the above sections and then include it in your Blogger template. To do that:

1. Go to Blogger Dashboard -> Template
2. Edit HTML
3. Now search for the line where we added the FitVidsJS <script...></script> tag. Paste the initialization code just after it. Here's a screenshot of how it must look once you have it in place.
   
   
   
   
   

Make sure the scripts are in this order: jQuery -> FitVids -> Initialization Code

If it looks fine save the template and try it on a post.

Questions or comments?

It is quite possible that this may not work properly for every blog due to different reasons, even if one part of the guide is not followed properly the chances are high that errors may come up during the set-up, so if you have any questions regarding this you can post a comment on this post (include your blog address) and we will try to help you set it up.

If you have suggestions and comments on this tutorial please post it in the comment form, we would love to hear from you! This post may not cover every aspect of the jQuery library, or the FitVids plugin, as it would have made the post enormously large, to help others any bit of information that you think is vital would be appreciated.

Making Images Fit in Post Body on Blogger

If you are working on a responsive design for your Blogger blog, or you are just tired of resizing your images in post editor to fit in the post container then this tutorial will show you an easy way to make images fit with it's surrounding.

This problem occurs often when you try to post images of the dimension larger than your content area or you are just using a responsive layout and when it down-sizes, the images overflows the content area.

Before you continue with the tutorial, check the demo:
Demo: Without the CSS Demo: With the CSS

In the first demo, the image in the container overflows because the width of the image is larger than that of the image, but in the second demo, if the image width is greater than the container's, it will fit itself to the container.

The Code!

All this can be achieved with a small block of CSS code. Before I start giving you lectures on how this works, here's the code for you to use (can be used in most Blogger Templates, but you might need to change the selectors if you are using a custom designed template):

.post-body img {
    max-width:100%;
    max-height:auto;
}

Now you just need to apply this code to your blog, check this tutorial to learn how add CSS in Blogger.

How does it work?

If you are not a web designer or coder, then this might all seem like a magical charm to you, but it's just code, code that's made to make your life easier. Well, so if you are ready to get bored then I am starting my chapter on CSS.

What actually does the magic is the max-width CSS property which gives any element a maximum width limit. So if you specify an element the the maximum width of 200px, it wouldn't exceed it. The 100% value tells the browser that the element(s) must not exceed the full content width of the container.

The max-height property helps in keeping the original proportion of the image intact. To know more about what would happen if you specify a value in percentage then try and check the results ;)

Reiulanus Responsive Blogger Template

Reiulanus Blogger Template is the newest and the most advanced Blogger template with a Responsive design  and fluid layout. Responsive Design is what every site owners would like to have for their blog and especially for Blogger users, I have put my knowledge about responsive design in making this template.



You will see responsive site layout mostly in WordPress themes, because the authors of those themes are the real professional and they earn thousands of dollars selling those themes to hundreds of people each for $100.Getting responsive design on your site can be expensive if you want to hire a web designer to make that only for your site but if you are on Wordpress you can buy a responsive theme for as less as $100 but what about the guys on Blogger, no matter if you are using WP or Blogger, responsive design and fluid layout is same everywhere and required too. And that's why it was too important to develop such Blogger Template. Following are the price and information about the template.

Preview Template Buy Template for $49 Download for Free

The template is a premium one but due to heavy user request we've made it available for everyone for free. SBTemplates is now hosting the template on their website, you can find more free blogger templates on SBT.

If you want to see how this blogger template appears in different devices, you may check this
http://mattkersley.com/responsive/?reiulanus-template.blogspot.com

Features of this Template

The template includes all the features the features from my previous templates. Like we used correct markups for important elements of a page for good rankings in search engines and that makes the template a SEO friendly template plus the template is using minimal but beautiful design that can keep a visitor onsite for a longer time. Some of the notable features of this template are below.

1. Light Design

We have used simple design but good looking design which is in trend now. We rarely used images in making the template's design and that's why the template is light and very clear, it's not too fancy and that makes it easier for the users to navigate through the blog.

2. No "Auto Summarize" technique used

These techniques gives you a good result but it also reduces the performance of your blog and is very messy in the back-end. Using it is just a foolishness if you want a SEO friendly blog, it's better to use the Blogger's Page Break option given in the post editor. 

3. Better Search Widgets

Often people don't use search function on a blog just because of their dull looks not intentionally but it usually happens, making it more interactive will attract the visitor to use the search function. We have included not one but two different search forms in the template, one at the top and one at the bottom, it's for the ease of the user as they don't need to scroll much to find content on your site, especially for mobile users where scrolling is the most difficult job in browsing a page. 

4. Content is given more importance

We believe that content is the most important element on your blog and people comes on the blog to read that content so we keeping it in mind we made sure there's nothing in the template that can distract a user from the content or even make them leave the page. Do you know, 3 seconds is enough for a user to visit a site through a search engine and decide if it is what they needed and again we made sure the main content (article) is visible on the page as soon as the page is opened in a browser.

5. Used no Fancy Elements

No Fancy Pop-up or anything like that! People may like it but not everyone, it can be annoying for some people who is serious about the content and that doesn't makes a blog look professional, so if you are serious about your blog then you might don't want your visitors to go away from your site.

6. Used Popular Post and Related Post Widget

Design is not only about filling colors, it's also about managing things and placing it at correct place. I have done everything that will keep a reader engaged with your website. Popular Post widget is place in the bottom and related post is below the posts and both of them are designed beautifully so people will love to try the links in those widgets and that will increase your pageviews and visitor's time on site.  

7. Easily Customizable 

Despite of being an advanced template with responsive design you can always customize it just like any other default templates in Blogger. You can add more remove gadgets, change the backgrounds or even add your own CSS to modify it, we have used simple layout so you won't have any difficulties in understanding the markup and modifying a style. 

Fresh New Responsive Design

Now there's no need of side scrolling on mobile device in your blog just because the the screen size is smaller than the blog's width, it's not a problem anymore with the responsive design in this template. You can see how the responsive design works by clicking on the "Preview Template" link above. If you don't have a mobile with you to check how your blog will look with the template on a handheld device you can simply resize the browser window to see it working live and that's how it will work on mobile phones or tables or device with any screen size and not even need to turn on the mobile template on Blogger for your blog, when you buy this template just turn it off because you won't need it anymore to display a better version of your blog on handheld devices with different screen sizes.

When you are getting a template with responsive design then why spend hundreds of dollars to hire a web designer to make your blog responsive ? Buying this template means you are saving money for the future, as responsive design is now very popular and everybody will be using Responsive Site Templates so why not buy now with a low price.

I decided to make such template because templates you find online for Blogger are coded very poorly and that's what you will see on most of the Blogger blogs and that's bad for Blogger's reputation, but with this template your readers will be amazed to see such technology on Blogger templates for the first time, it's going to be a though competitor for WordPress responsive themes.

It's in trend! Responsive Web Design is listed #2 in top web design  trend for 2012. So what are you waiting for ? Don't you feel that your blog should be following the trend and should really look new and fresh.

Learn more Responsive Design

If you are gonna use a responsive design then you would want to learn about Responsive Web Design, there many more things you can learn about in Responsive Web Design (RWD). Here are some links which will take you to the world of responsive web design.

1. What the Heck is Responsive Web Design : A fun but informative web project on GitHub by some web geeks tells you all about responsive web design in an interesting manner. Even the site is responsive, just try resizing the browser/
2. Smashing Magazine's Post about RWD : This post on Smashing Magazine is all you need to know about responsive web design and how to use it, that's a little serious but informative post. As a client you must always expect a web designer to provide you a design which is coded according to the standard.

I think those two links are enough to learn the concept and uses of responsive web design but you may always check new articles online or even buy some books to learn more about it.

No fees for Newer Versions

We will make more improvements in the template in the future to keep up with the standard and there's a good news, you won't have to pay for newer version if you are already a customer, you will get it for free. We care about you and always want you to use the best thing for your blog, so we won't charge even a single penny for upgrades.

Note: You will be charged if you want an upgrade on demand. That includes change of design, adding functionality etc. 

Lifetime Support

We will provide lifetime support for the template. Whenever and whatever help you need we will be there to help you. Just mail us on depy45631@gmail.com for any help regarding the template and we will get it done.

Buy the Template

You can buy the template for $49 and to buy it please send an email on depy45631@gmail.com. You can pay via PayPal on this account deepakblogger45631@gmail.com.
Paypal is the most secure method of payment by credit card, if you don't have an account on Paypal then there's no need to sign-up for a new account, you can simply pay with your credit card and they have a very secure system so you don't need to show your credit card number to anybody.

Note: Don't trust any other person offering you this template. Distribution of this template without the owner's permission is prohibited and we can take legal action in such situation. Buy from the original and respect the hardwork of this template's author (Deepak Kamat).