fancybox clickable map

html

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

js

<!-- head内などに下記を記述します -->
$(function() {
	//fancyboxを起動させる記述
	$(".fancybox").fancybox({
		padding:0,
		margin:0,
		//fancyboxが完全に起動し終わった後、画像をくくっているDIVにusemap要素を追記します
		onComplete: function() {
			$('#fancybox-img').attr('usemap', '#Map');
		}
	});
});