JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<!-- option 1 normal -->
<p>Option 1 : bind fancybox to selector</p>
<a class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg">Click to get image</a><br /><br />

<!-- option 2 on click and manual open -->
<p>Option 2 : open manually on click</p>
<div id="menu">
<a href="#nogo" data-path="http://fancyapps.com/fancybox/demo/1_b.jpg">Click to get image</a>
</div>

JavaScript

// option 1
$(".fancybox").fancybox();

// option 2
$("#menu a").on("click", function() {
    $.fancybox.open($(this).data("path"));
});