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" width="25%" rel="#Map" title="2009 BMW S1000RR is official" class="fancybox" />
<br />
<img src="http://farm6.static.flickr.com/5177/5574889454_b0a8c7845b.jpg" width="25%" rel="#Map"  title="EBR 1190 Typhon hits the track" class="fancybox" />
<br />
<img src="http://farm6.static.flickr.com/5108/5576530131_24d76c0ae8.jpg" width="25%" />
<br/>
Try clicking image to enlarge....
<map name="Map" id="Map">
    <area shape="poly" coords="0,0,0,328,145,328" href="#" />
    <area shape="poly" coords="0,0,180,0,328,328,142,328" href="#" />        
    <area shape="poly" coords="328,328,328,0,180,0" href="#" />    
</map>
<br /><br />
<i>
    Image curtesy of <a href="http://hellforleathermagazine.com/2008/04/2009-bmw-s1000rr-is-official/">Hell for leather magazine</a>
</i>

JavaScript

$('map').click(function(e) {
    e.preventDefault();
    alert('Clicked on the map');
});



$("img.fancybox").click(function() {
    var url = $(this).attr('src');
    var map = $(this).attr('rel');
    var title = $(this).attr('title'); 
    var content = '<img src="' + url + '" usemap="'+ map + '" />';
    $.fancybox({
        'title': title,
        'titlePosition': 'inside',
        'content': content
    });
});