Movable Type4の画像表示用に「highslide.js」の導入

　今までこのブログでは画像の拡大表示に「Lightbox」を使っていたのですが、小粋空間様のJavascript（menufolder.js、ajaxCalendar.js、dayChecker.js）とぶつかってしまうようなので、「Highslide」に変更しました。

Highslideの公式サイトからファイルセットをダウンロードします。（非商用サイトでは無料です）
ブログのディレクトリの中に「highslide」というディレクトリを作り、その中に「highslide.js」をアップロードします。
ダウンロードしたファイルセットの中のindex.htmlをブラウザで表示させると、いくつかの画像の表示パターン（白枠あり／なしなど）があるので、好きなのを選びます。
　私は「Drop shadow and no border, semi transparent close button」というのを選択しました。
そのサンプルファイルである「example-no-border.html」のソースコードからCSS部分を別ファイルにし、「highslidenoborder2.css」という名前をつけて「highslide」ディレクトリにアップします。

「ヘッダー」テンプレートにJavascriptへのリンクを記載して保存します。

<script type="text/javascript" src="<$MTBlogURL$>highslide/highslide-with-gallery.js"></script>
<script type="text/javascript">
	hs.graphicsDir = '<$MTBlogURL$>highslide/graphics/';
	hs.align = 'center';
	hs.transitions = ['expand', 'crossfade'];
	hs.outlineType = 'rounded-white';
	hs.fadeInOut = true;
	//hs.dimmingOpacity = 0.75;

	// Add the controlbar
	if (hs.addSlideshow) hs.addSlideshow({
		//slideshowGroup: 'group1',
		interval: 5000,
		repeat: false,
		useControls: true,
		fixedControls: false,
		overlayOptions: {
			opacity: 1,
			position: 'top right',
			hideOnMouseOut: false
		}
	});
</script>

「スタイルシート」テンプレートに
CSSのスクリプトを追加します。
この外部CSSファイルはダウンロードしたファイルの中で自分が目的とする表示方法のものから書き出しました。
Movable Typeの管理画面から画像ファイルをアップロードし、<a>タグの中に
```
class="highslide" onclick="return hs.expand(this)"
```
を記述します。
ちなみにこれは「lib/MT/Asset/Image.pm」を修正すると今後自動的に付加されるようになります。参考サイト
拡大画像にキャプションを入れる場合は</a>の後に
```
<div class="highslide-caption">
    キャプション文
</div>
```
を入れます。