JSFiddle - React, Tailwind, and code Playground

HTML

<div class="files">
  <div class="file">
    <a href="https://phpclub.tech/1152267/15206021256410.png">
      <img class="preview" src="https://phpclub.tech/1152267/thumb/15206021256410s.jpg" alt="500x500">
    </a>
  </div>
  
  <div class="file">
      <a href="https://phpclub.tech/1152267/15206021256411.jpg">
        <img class="preview" src="https://phpclub.tech/1152267/thumb/15206021256411s.jpg" alt="500x500">
      </a>
  </div>
</div>

<div id="lightbox"></div>

CSS

.file {display: inline-block}

JavaScript

$(window).click(function(e) {
  var lightbox = $('#lightbox');

  var a = $('a', '.file');

  if ($(a).has(e.target).length == 0 && !$(a).is(e.target)) {
    if (!$('.fullsize').is(e.tareget)) { //somehow it doesn't works
      $(lightbox).hide();
      $(lightbox).empty();
    }
  } else {
    $(lightbox).empty();

    var src = $(e.target).parent().attr('href');
    var ext = src.split('.').pop().toLowerCase();

    switch (ext) {
      case 'jpg': case 'png': case 'gif':
        var content = $('<img/>', {class: 'fullsize', src: src});
        break;

      case 'mp4': case 'webm':
        var content = $('<video/>', {class: 'fullsize', src: src, controls: 'controls'});
        break;

      default:
        window.open(src, '_blank'); 

        return false;
    }

    $(lightbox).append(content);
    $(lightbox).show();

    // sometimes it works wrong
    $(content).ready(function() {
      var width = $(window).width();
      var cWidth = $(content).width();

      var height = $(window).height();
      var cHeight = $(content).height();

      var top = (height - cHeight) / 2;
      var left = (width - cWidth) / 2;

      $(lightbox).css('top', top);
      $(lightbox).css('left', left);
    });
  }
});

$('a', '.file').click(function(e) {
  e.preventDefault();
});