JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js"></script>
<div class="tab_container">
            <p>
                        <a id="single_1" href="http://farm8.staticflickr.com/7171/6417719753_374653e28c_b.jpg" title="IHAMA Rocky beach II (HDR) (nextBlessing)">
                <img src="http://farm8.staticflickr.com/7171/6417719753_374653e28c_m.jpg" alt="">            </a>
    </p>
</div>

CSS

.fancybox-inner{width:auto!important; height:auto!important;}
.fancybox-outer{width:auto!important; height:auto!important;}

JavaScript

$("#single_1").fancybox({
          helpers: {
              title : {
                  type : 'float'
              }
          },
    autoSize: true,
    afterShow: function(){
        $('.fancybox-inner').append('<br/><br/><br/> testing stuff</br>')
    }
      });