JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.css">
  <a data-fancybox="gallery" id="lgitem-1" href="http://lorempixel.com/output/animals-q-c-400-300-6.jpg">
      <img src="http://lorempixel.com/output/animals-q-c-400-300-6.jpg" />
  </a>

CSS

.fancybox-close-small {
  right: 0 !important;
  top: 0 !important;
  background-color: rgba(0,0,0,0.3);
}

JavaScript

$('[data-fancybox="gallery"]').fancybox({
	smallBtn: "true"
});