もしも Fancybox for WordPress でイメージマップが使いたくなったら

ドリフコント的なタイトル（古）ですが、先日サイトを作っている際に、どうしてもイメージマップ + Lightbox系の動作をさせなければならなくなったので、メモを残しておこうと思います。以前使ったFancybox for WordPressに引き続き今回もこれで。便利〜!!

やってきたデザインは、院内マップ。
どうやらパンフレットと同じものを使うらしく、建物の形は斜めになっていてさらに隣り合う部屋がちょっと重なってる………。四角くリンクをおけるならリストタグでやれちゃいそうなんですがパッと頭に浮かんだのがイメージマップ。← 懐かしすぎるよ >_<

しかもそこをクリックしたら、担当者の顔写真や院内の画像をライトボックス風にして欲しいとのご要望でした。サイト全体でFancybox for WordPressを使用していたので、もしかしたら、イメージマップも大丈夫なか？と思い、サンプルを作って当て込んでみると……反応無し。ググってみると、

ありがとう!! Stack Overflow  (^^)

ありましたよ。感謝です!!

I wonder if there is a way to use the fancybox with Image maps?

という質問に複数の方法でやり方が掲載されていました。
例に倣い今回は、以下の様な感じで↓↓

[javascript]jQuery(‘map > area.fancybox’).click(function(e) {
e.preventDefault();
var url = jQuery(this).attr(‘href’);
var title = jQuery(this).attr(‘title’);
var type = jQuery(this).attr(‘rel’);
jQuery.fancybox({
‘title’: title,
‘titlePosition’: ‘inside’,
‘href’ : url,
‘type’ : type,
‘overlayColor’ : ‘#000000’,
‘paddingColor’ : ‘#FAFAFA’,
‘padding’ : 5,
‘overlayOpacity’ : 0.8
});
});[/javascript]

HTMLは、

[javascript]
<img src="画像のソース" alt="" width="" height="" usemap="#Map" border="0" />
<map name="Map">
<area class="fancybox" title="" shape="circle" coords="439,318,29" href="画像のソース" alt="" />
<area class="fancybox" title="" shape="circle" coords="389,138,27" href="画像のソース" alt="" />
<area class="fancybox" title="" shape="circle" coords="355,169,25" href="画像のソース" alt="" />
以降複数………
</map>
[/javascript]

としてやることでOK!! 😀

書き込む場所は、管理画面 Fancybox for WPの、

イメージマップって最近はすっかり使わなくなっていたので懐かしすぎましたが、デザイン的に使う必要があっても安心です。ってか、Fancybox for WordPressはとっても便利ですね〜( ^o^)ノ