JSFiddle - React, Tailwind, and code Playground

by amandabeau

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.4/jquery.min.js"></script>
<script src="http://www.acquafibrausa.com/fancybox/jquery.fancybox-1.3.4.js"></script>
<link rel="stylesheet" href="http://www.acquafibrausa.com/fancybox/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

$('map > area.fancybox').click(function (e) {
    e.preventDefault();
    var url = $(this).attr('href');
    var title = $(this).attr('title');
    var type = $(this).attr('rel');
    $.fancybox({
        'title': title,
            'titlePosition': 'inside',
            'href': url,
            'type': type
    });
});