JSFiddle - React, Tailwind, and code Playground

by Diego Betto

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<p> 
    <a class="fancybox" rel="gallery1" href="https://farm2.staticflickr.com/1617/24108587812_6c9825d0da_b.jpg"> </a>
    <a class="fancybox" style="margin-left: 20px" rel="gallery1" href="https://farm4.staticflickr.com/3691/10185053775_701272da37_b.jpg"></a>
    <a class="fancybox" style="margin-left: 20px" rel="gallery1" href="https://farm1.staticflickr.com/574/22407305427_69cc6e845f_b.jpg"></a>
    <a class="fancybox" style="margin-left: 20px" rel="gallery1" href="https://farm1.staticflickr.com/291/18653638823_a86b58523c_b.jpg"></a>
</p>

CSS

a.fancybox {display:inline-block;width:50px;height:50px;background-size:cover;}

JavaScript

jQuery(document).ready(function(){
  jQuery('.fancybox').each(function(i,e){
    jQuery(e).css('background-image','url('+jQuery(e).attr('href')+')');
  });
  jQuery("a.fancybox").fancybox({
      openEffect: 'none',
      closeEffect: 'none'
  });
})