JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.6/css/jquery.fancybox.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.6/js/jquery.fancybox.min.js"></script>
  
  <ul>
    <li>
      <a href="//placehold.it/400/FF0000" rel="gr1" title="1 img">
        <img src="//placehold.it/200/FF0000" alt="">
      </a>
    </li>
    <li>
      <a href="//placehold.it/400/00FF00" rel="gr1" title="2 img">
        <img src="//placehold.it/200/00FF00" alt="">
      </a>
    </li>
    <li>
      <a href="//placehold.it/400/00FF00" rel="gr1" title="3 img">
        <img src="//placehold.it/200/0000FF" alt="">
      </a>
    </li>
  </ul>

CSS

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

ul li {
  width: 200px;
  height: 200px;
  float: left;
  border: 1px solid red;
}

a {
  display: block;
  width: 100%;
  height: 100%;
}

JavaScript

$('.gallery__link').fancybox({
  width: 800,
  minWidth: 800,
  margin: 0,
  padding: 0,
  // height: 'auto',
  fitToView: false,
  autoWidth: false,
  autoSize: false,
  wrapCSS: 'gallery-fancy',
  helpers : {
    title : {
      type: 'inside',
      position : 'top'
    },
    overlay: {
      css : {
        'background' : 'rgba(0, 0, 0, 0.8)'
      },
    } 
  },
  tpl: {
    next : '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span>›</span></a>',
    prev : '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span>‹</span></a>'
  },
  beforeLoad : function() {            
    this.title = "<span class='gallery__title-left'>" + (this.title ? this.title : '') + "</span>" + "<span class='gallery__title-right'>" + (this.index + 1) + ' из ' + this.group.length + "</span>";
  }
});