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-thumb" rel="fancybox-thumb" 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-thumb" rel="fancybox-thumb" href="http://upload.wikimedia.org/wikipedia/commons/8/81/OFLCN_-_G.PNG" title="Screaming ride in California Adventure"/>        
</map>

JavaScript

$(document).ready(function() {
    $(".fancybox-thumb").fancybox({
        prevEffect    : 'none',
        nextEffect    : 'none',
        helpers    : {
            title    : {
                type: 'outside'
            },
            overlay    : {
                opacity : 0.8,
                css : {
                    'background-color' : '#000'
                }
            },
            thumbs    : {
                width    : 50,
                height    : 50
            }
        }
    });
});