fancybox multiple clickable map

html

<!-- クリックでfancyboxを機動させる画像と、ポップアップさせたい画像の記述 -->
<!-- ★classにクリッカブルマップのIDと同じクラスを追加する -->
<a href="http://jsrun.it/assets/o/x/g/D/oxgDY.jpg" class="fancybox map-1">
    <img src="http://jsrun.it/assets/o/x/g/D/oxgDY.jpg" width="200" />
</a>
<!-- ポップアップした画像に貼られるクリッカブルマップの設定です -->
<!-- ★mapのIDと同じクラスをareaのclassに追加する -->
<map name="map-1" id="map-1">
<area shape="rect" coords="7,8,38,36" href="http://jsrun.it/assets/9/Q/J/1/9QJ1n.jpg" class="fancybox map-1" />
<area shape="rect" coords="41,6,70,35" href="http://jsrun.it/assets/y/z/4/q/yz4qn.jpg" class="fancybox map-1" />
<area shape="rect" coords="75,6,103,35" href="http://jsrun.it/assets/y/2/t/Q/y2tQB.jpg" class="fancybox map-1" />
</map>

js

<!-- head内などに下記を記述します -->
$(function() {
	//fancyboxを起動させる記述
	$(".fancybox").fancybox({
		padding:0,
		margin:0,
		onComplete: function(el) {
			//クリックされた要素にmap-\dにマッチするclassがあるか判別
			var hasMap = $(el).attr('class').match(/map\-\d/i);
			if(hasMap){
				$('#fancybox-img').attr('usemap', '#' + hasMap[0]);
			}
		}
	});
});