JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://orsas.com/hosted/blogger/fancybox/jquery.fancybox-1.3.4.css">
<script src="http://orsas.com/hosted/blogger/fancybox/jquery.fancybox-1.3.4.js"></script>
<img src="http://hellforleathermagazine.com/images/BMW-K1000RS1.jpg" usemap="#Map" />
    <br />
    <map name="Map" id="Map">
 <area class="fancybox" rel="gallery1" shape="poly" coords="0,0,0,328,145,328" href="http://4.bp.blogspot.com/_0AG1OYH8dwY/S-GBwwsNjzI/AAAAAAAAAXs/eRYJ3eBFQuc/s1600/world.jpg" title="barred owl spotted on a school playground " />
 <area class="fancybox" rel="gallery1" href="http://upload.wikimedia.org/wikipedia/commons/8/81/OFLCN_-_G.PNG" title="Screaming ride in California Adventure"/>        
</map>

JavaScript

$(document).ready(function() {
    $(".fancybox").fancybox({
        openEffect    : 'none',
        closeEffect    : 'none'
    });
});