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 -

Modern design and feel
Responsive and touch enabled, works flawlessly on mobile devices.
Full screen and zoom option
Slideshow option for multiple images in a gallery (i.e a post in Blogger blogs)
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 -

Go to your Blogger Dashboard > Themes
click on Edit HTML
open in-page search CTRL+F/CMD+F and enter the keyword "jquery"
Does it take you to a line with "<script src='.../jquery.min.js' " (may look similar) ? If yes then you already have jQuery
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,

Go to your Blogger Dashboard > Theme
Click on the Edit HTML button on the page
search for </body>
Paste the code immediately above the </body> tag
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.

Go to your Blogger Dashboard
Settings > Posts, comments and sharing settings
Next to "Showcase images with Lightbox" choose "No" from the dropdown list.
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.

Go to your Blogger Dashboard > Theme
Click on the Edit HTML button on the page
search for </body>
Paste the code immediately above the </body> tag
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

Open your blog post in the post editor and click on the HTML button next to the Compose button
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.

In the JavaScript snippets change

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

$("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,

Open the post in the post editor and switch to the HTML mode
Look for an image's HTML code, at minimum it would look like this
```
<a href="{image-url}" >
<img href="{image-url}"  />
</a>
```

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>

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.