Click to zoom / enlarge images

You can add the fancyBox script to your theme to allow readers to click and expand images to their full-size versions in a lightbox. 

Click to zoom / enlarge this image

Is it free? For you, probably. KnowledgeOwl has purchased an Extended Commercial license for fancyBox. As long as you are  using it within your KnowledgeOwl theme and are not developing your own commercial products with fancyBox , you do not need to purchase your own license. To purchase your own, visit fancyBox licenses.

Installation method 1: For using fancyBox in individual articles only

  1. Create a new snippet under Library > Snippets and give it a name, such as "fancyBox script" for example. Switch to the code editor, paste the following code in, and click on 'Create':
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"></script>
    <script>
       $(function(){
           var addToAll = false;
           var gallery = true;
           var titlePosition = 'inside';
           $(addToAll ? '.hg-article-body img' : '.hg-article-body img.fancybox').each(function(){
             if($(this).parent("a").attr("href") === undefined){
               var $this = $(this);
               var title = $this.next('figcaption').text();
               var src = $this.attr('data-big') || $this.attr('src');
               var a = $('<a href="#" data-fancybox data-caption="'+title+'"></a>').attr('href', src);
               $this.wrap(a);
             }
           });
           if (gallery)
               $('a[data-fancybox]').attr('data-fancybox', 'group');
           $('a[data-fancybox]').fancybox({
               titlePosition: titlePosition
           });
       });
    </script>
    
  2. Now, copy & paste the new snippet's merge code value into any article where you would like to see the fancyBox functionality. You can also insert the snippet code by using the 'Insert Snippet' option  in the article editor instead.

Installation method 2: For using fancyBox in all articles

  1. To add it to all articles automatically, copy & paste the following script at the very bottom of the Settings > Style > Custom HTML (Article) section and hit 'Save':
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"></script>
    <script>
       $(function(){
           var addToAll = true;
           var gallery = true;
           var titlePosition = 'inside';
           $(addToAll ? '.hg-article-body img' : '.hg-article-body img.fancybox').each(function(){
             if($(this).parent("a").attr("href") === undefined){
               var $this = $(this);
               var title = $this.next('figcaption').text();
               var src = $this.attr('data-big') || $this.attr('src');
               var a = $('<a href="#" data-fancybox data-caption="'+title+'"></a>').attr('href', src);
               $this.wrap(a);
             }
           });
           if (gallery)
               $('a[data-fancybox]').attr('data-fancybox', 'group');
           $('a[data-fancybox]').fancybox({
               titlePosition: titlePosition
           });
       });
    </script>
    
  2. Voila! All the images in your knowledge base should now have the fancyBox functionality.

Optional drop shadow and hover effect

Hover and click on the images below to see fancyBox in action:

Add fancyBox CSS to your Custom
Add fancyBox JS to your Custom HTML > Body

To add the drop shadow and hover effect to your images like you see here, add the following code as well to the new snippet you created if you used installation method 1.

<style type="text/css">
    a[data-fancybox] img {
        border: none;
        box-shadow: 0 1px 7px rgba(0,0,0,0.6);
        -o-transform: scale(1,1); -ms-transform: scale(1,1); -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
    } 
    a[data-fancybox]:hover img {
        position: relative; z-index: 999; -o-transform: scale(1.03,1.03); -ms-transform: scale(1.03,1.03); -moz-transform: scale(1.03,1.03); -webkit-transform: scale(1.03,1.03); transform: scale(1.03,1.03);
    }
</style>

If you chose installation method 2, copy & paste the following code at the bottom of the Settings > Style > Custom CSS section of your knowledge base:

a[data-fancybox] img {
        border: none;
        box-shadow: 0 1px 7px rgba(0,0,0,0.6);
        -o-transform: scale(1,1); -ms-transform: scale(1,1); -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
    } 
a[data-fancybox]:hover img {
        position: relative; z-index: 999; -o-transform: scale(1.03,1.03); -ms-transform: scale(1.03,1.03); -moz-transform: scale(1.03,1.03); -webkit-transform: scale(1.03,1.03); transform: scale(1.03,1.03);
    }

For more information on how you can use fancyBox, check out their demos and documentation.

Feel free to get in touch with our Support team if you need help installing fancyBox in your knowledge base!