a-blog cmsでクリッカブルマップでもprettyPhotoを使う方法

a-blog cmsでは拡大画像を表示する時に、標準でprettyPhotoが設定されていますが、こちらの機能をクリッカブルマップでも使いたい場合の方法をご紹介します。

早速ですが、通常ではprettyPhotoの指定が、「a」タグに設定されています。

a[rel^="prettyPhoto"]

しかし、クリッカブルマップの場合、「area」タグになるので、指定が効きません。

area[rel^="prettyPhoto"]

そこで「area」にも効くように「config.js」の指定を少し修正してやります。
v2.5の場合は55行目付近にあると思います。

 //----------------------------------
 // イメージビューア ( prettyPhoto )
 ppMark: 'a[rel^="prettyPhoto"]',

この部分を下記の様に変更します。

 //----------------------------------
 // イメージビューア ( prettyPhoto )
 ppMark: 'a[rel^="prettyPhoto"],area[rel^="prettyPhoto"]',

次はhtml。%{EID}でエントリーIDを渡すことで、該当エントリーの他のprettyPhotoの画像と同様に扱えます。（なお、ユニットのテキストでグローバル変数を使う場合は、unit.htmlの使いたいテキストスタイルに校正オプション[buildTpl]を設定してください）

<img src="image.jpg" usemap="#map_link" />
<map name="map_link">
<area rel="prettyPhoto[%{EID}]" shape="rect" coords="1,2,3,4" href="big_image.jpg">
</map>

これだけでクリッカブルマップのリンクからでもprettyPhotoが使える様になりました。
あぁ便利。