FancyBox three Image Lightbox & Slider for Blogs

Lot of us posts photos on our blogs daily in addition to beingness able to sentiment it inwards low-cal box / gallery sentiment is a basic part for every spider web log in addition to Blogger does furnish ane but ane that is really onetime in addition to needs an upgrade thus nosotros direct hold decided to post this tutorial to aid you lot add FancyBox 3 inwards your blogger blog.

FancyBox three is an picture / content light-box plugin that provides the experience of a modern in addition to responsive website. If you lot direct hold had experience alongside the Blogger’s default light-box characteristic you lot may direct hold felt that it is really basic in addition to for a spider web log that focuses to a greater extent than on photos in addition to images it powerfulness non hold upwardly the best option.

Demo & Comparison

For example, hither nosotros direct hold ii photos, the outset ane is laid to opened upwardly inwards Blogger’s default light-box in addition to the other is the FancyBox light-box plugin.

Here’s a demo on a seek spider web log – Demo for Image Lightbox 

Images alongside Blogger’s Default Lightbox


Images alongside FancyBox three Lightbox


The jQuery plugin, FancyBox plugin is to a greater extent than than exactly a picture lightbox / gallery, it tin exercise a lot to a greater extent than than exactly images but inwards the Blogger environs nosotros volition hold upwardly exactly focusing on images because that is what nosotros demand here.

Here are a few attractive features of the FancyBox plugin –

  1. Modern blueprint in addition to feel
  2. Responsive in addition to touching on enabled, plant flawlessly on mobile devices. 
  3. Full enshroud in addition to zoom option
  4. Slideshow selection for multiple images inwards a gallery (i.e a post inwards Blogger blogs)
  5. Very flexible – if you lot know basic HTML / JavaScript you lot tin exercise a lot to a greater extent than alongside this plugin. 

Setting it up

Note: Before starting regard taking a backup of your electrical current Blogger template
The FancyBox three plugin is a jQuery based plugin in addition to for it to piece of occupation jQuery needs to hold upwardly added to your template every bit good though many templates (most probable if it is a third-party template or you lot direct hold previously added such plugins) may already direct hold jQuery added into it in addition to it is non recommended to add together it over again every bit that exactly makes the page charge the same affair twice which is non skilful for the functioning of a website. 
Check if you lot already direct hold jQuery:

In this tutorial nosotros volition hold upwardly asking you lot to add together for sure script files required for the plugin to work, jQuery code too, though if you lot already direct hold it on your spider web log thus avoid adding it over again is the best option.

To cheque whether you lot direct hold jQuery or non follow these steps –

  1. Go to your Blogger Dashboard > Themes
  2. click on Edit HTML 
  3. open in-page search CTRL+F/CMD+F in addition to come inwards the keyword “jquery”
  4. Does it direct hold you lot to a trouble alongside “<script src=’…/jquery.min.js’ ” (may aspect similar) ? If aye thus you lot already direct hold jQuery
  5. And if non thus you lot exercise non direct hold it, thus inwards the side yesteryear side steps hold upwardly for sure non to omit the jQuery script. 

Adding the scripts in addition to stylesheets

The Fancybox plugin is a lightweight jQuery plugin alongside a lot of functionalities. It depends on jQuery to work, in addition to a stylesheet that tells the browser how to display things nether it, inwards full in that place are three files nosotros volition hold upwardly adding, namely – jQuery, FancyBox Script in addition to FancyBox Stylesheet. 
Note: If you lot already direct hold jQuery inwards your template it is recommended you lot take the trouble from the next HTML markup that adds the jQuery script. 
Copy the next HTML snippet, 

<!-- FancyBox CSS --> <link href="//" rel="stylesheet" type="text/css"/>  <!-- jQuery --> <script src="//"></script>  <!-- FancyBox three --> <script src="//"></script> 

Upon copying glue it inwards a Notepad / TextEdit application. When you lot direct hold the code snippet inwards a text editor take the trouble with <!-- jQuery --> in addition to the trouble later that if you lot institute that jQuery already exists inwards your template, else hold the whole code without making whatsoever changes. 

To add together it inwards the template, 

  1. Go to your Blogger Dashboard > Theme
  2. Click on the Edit HTML push on the page
  3. search for </body> 
  4. Paste the code straight off inwards a higher identify the </body> tag
  5. Save the theme.

The </body> tag is basically the terminate of the trunk of the page in addition to that is where nosotros are adding the scripts because such scripts are run exclusively when the consummate HTML has been loaded. 

In illustration you lot already had jQuery inwards your template in addition to you lot deleted the jQuery from our code thus exercise recall that these scripts should e’er come upwardly later the jQuery’s script, adding them earlier it may outcome inwards error. This is a mutual error people make, in addition to confirming this tin relieve you lot a lot of fourth dimension inwards figuring out what went wrong.

Disable Blogger’s Lightbox

The codes nosotros added inwards the previous department has no trial on your images at nowadays in addition to that’s normal, nosotros haven’t initialized the scripts thus you lot wouldn’t hold upwardly able to opened upwardly it using FancyBox lightbox plugin every bit for now, nosotros volition hold upwardly doing that shortly, but earlier that brand for sure you lot plough off Blogger’s default picture lightbox every bit it may conflict alongside the ane we’ve added.

  1. Go to your Blogger Dashboard
  2. Settings > Posts, comments in addition to sharing settings
  3. Next to “Showcase images alongside Lightbox” select “No” from the dropdown list. 
  4. click on the “Save settings” push on the acme correct of the page.
Great, at nowadays the lightbox from Blogger is disabled in addition to nosotros tin expire along on activating our novel lightbox plugin. 

Activating the plugin on photos / images

Without specifying which images is to hold upwardly activated inwards lightbox nosotros assume that all images within of the post trunk that has links to an picture is supposed to opened upwardly inwards the lightbox. 
It is of import for us to nation the plugin that “Hey, don’t direct hold trial on images exterior of the post body” that’s because in that place are many images all over the spider web log that you lot don’t desire to hold upwardly opened inwards the lightbox thus nosotros isolate the plugin within the post body. 
Copy the next code,

<script type="text/javascript"> //<![CDATA[  $(document).ready(function(){    /**************************    This part makes for sure nosotros select exclusively the images in addition to photos that is supposed to appear inwards 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 {        // .. exercise cypher      }    });          /**************************    This part initializes FancyBox on the qualifying images    **************************/    var options = {        infobar  : true,        buttons  : true,        speed    : 300,  // Animation duration inwards ms       margin : [40, 20] // Space unopen to image, ignored if zoomed-in or viewport smaller than 800px    };       $("[data-fancybox]").fancybox( options );  }); //]]>  </script> 

You direct hold to add together this code later the trouble of code nosotros added inwards the “Adding the scripts in addition to stylesheets” part of the tutorial.

  1. Go to your Blogger Dashboard > Theme
  2. Click on the Edit HTML push on the page
  3. search for </body> 
  4. Paste the code straight off inwards a higher identify the </body> tag 
  5. Save the theme.

It’s fourth dimension to seek it! After saving the subject opened upwardly up your spider web log in addition to acquire to a post alongside images in addition to click on the picture in addition to it should at nowadays hold upwardly opened inwards the novel modern low-cal box rather than the onetime ane Blogger provides initially.

Have questions? 

You powerfulness direct hold questions most the plugin or something most it that isn’t working every bit you lot expected, we’ve seat downwardly some mutual questions in addition to its answers for you lot – 

Is FancyBox condom to use?
Yes, it is ane of the most pop jQuery plugin for content lightbox on the spider web in addition to it is used yesteryear hundreds of thousands of websites. 
Learn to a greater extent than most it on FancyBox’s homepage.

Would it piece of occupation inwards the novel Blogger themes?

Yes, it is supposed to piece of occupation perfectly inwards the newer themes. If you lot are facing issues alongside whatsoever subject delight comment downwardly below alongside your spider web log URL in addition to nosotros volition direct hold a look.

As for third-party customized themes nosotros cannot guarantee.

How tin I acquire far piece of occupation exclusively on the images I desire it to?

The part $(".post-body a img").each(function(){ inwards the code that activates tells the plugin which images to select in addition to yesteryear default it activates on all images within of a post body. 
If you lot desire it to piece of occupation exclusively on for sure images in addition to non all thus follow these steps 
  1. Open your spider web log post inwards the post editor in addition to click on the HTML push side yesteryear side to the Compose button 
  2. When you lot are inwards the HTML mode, aspect for the image’s code which powerfulness hold upwardly something similar
    <a href="[.....]"><img src=" [.....] "/></a>

    To the <a> tag add together a specific bird refer value to it, for e.g

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

    You tin detect nosotros added class=”lightbox-image” to the <a> element.

  3. In the JavaScript snippets change
    $(".post-body a img").each(function(){



    And relieve it to the template code.

Now images which is within an anchor link i.e <a> tag that has a bird refer that you lot defined, hither nosotros used “lightbox-image” (you tin utilization anything else that starts alongside an underscore or an alphabet).

I would similar to add together captions to my lightbox images, how exercise I exercise it?

Caption that you lot desire to appear for a picture should hold upwardly manually added inwards the root of the image’s HTML code. Here’s how you lot can,

  1. Open the post inwards the post editor in addition to switch to the HTML mode 
  2. Look for an image’s HTML code, at minimum it would aspect similar 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 within of the data-caption attribute, thus you lot tin add together italic, bold or large text within of the caption every bit well.

I desire to customize it according to my needs, how exercise I exercise it?

If you lot direct hold a skilful cognition of JavaScript, HTML in addition to CSS thus you lot tin caput over to the plugin’s homepage in addition to direct hold a aspect at the documentation to larn how to customize it –

Not everyone is a coder nosotros sympathise but to customize it according to ones’ needs some advanced cognition is needed. You tin hire or inquire a spider web developer / designer to aid you lot out.

If your demand is non large in addition to what you lot desire tin hold upwardly achieved yesteryear only modifying a few codes hither in addition to in that place I tin furnish your gratuitous of terms aid though inwards illustration it requires skilful amount of fourth dimension in addition to piece of occupation I am available for hire every bit well. You tin contact me at for whatsoever aid or hiring me for a work.

Anything else?

For feedback, suggestions in addition to requests delight comment downwardly below.