JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js"></script>
<link rel="stylesheet" href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css">
<img src="http://www.acquafibrausa.com/images/caps_top.png" usemap="#Map" />
<map name="Map" id="Map">
    <area shape="rect" coords="43,91,177,141" href="http://www.acquafibrausa.com/images/nutrition_lime.png"
    class="fancybox" alt="Click to view Lime nutrition facts" rel="image" />
    <area shape="rect" coords="264,92,399,142" href="http://www.acquafibrausa.com/images/nutrition_orange.png"
    class="fancybox" alt="Click to view Orange nutrition facts" rel="image"
    />
    <area shape="rect" coords="488,92,622,143" href="http://www.acquafibrausa.com/images/nutrition_strawberry.png"
    class="fancybox" alt="Click to view Strawberry nutrition facts" rel="image"
    />
    <area shape="rect" coords="711,90,846,142" href="http://www.acquafibrausa.com/images/nutrition_peach.png"
    class="fancybox" alt="Click to view Peach nutrition facts" rel="image"
    />
</map>

JavaScript

$(".fancybox").fancybox();