Click to zoom / enlarge images

You can add the fancyBox script to your theme to allow readers to click images to a 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.

To install fancyBox in your knowledge base:

  1. Add the fancyBox CSS to your Custom <head>
    Go to Settings > Style > Custom <head> and paste the following code into the bottom of the text area:
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css" />
  2. Add the fancyBox JS to your Custom HTML > Body.
    Go to Settings > Style > Custom HTML > Body and paste the following code into the bottom of the text area:
    <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' : 'img[data-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>

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, paste the following at the bottom of your Custom <head>:

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


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