とりあえずまずはフツーにHighSlideの導入。と言っても英語もスクリプトも読めないのでただ動くようにするだけ。細かいカスタマイズも無し。ただ全部デフォルトだと気になる部分もあるのでパッと見でわかる範囲で弄る。
HighSlideを動かす
丸投げ。結構すぐ人に頼っちゃうんだね仕方ないね。わたしもここ参考にしたんだから仕方ないね。但し、
<script type="text/javascript" src="設置場所/highslide/highslide.js"></script>
上記に加えて、
<script type="text/javascript">
<!--
hs.graphicsDir = "設置場所/highslide/graphics/";
window.onload = hs.preloadImages;
//-->
</script>
最低限こいつも<head>~</head>に書き込まないと動きません。と言うかLoading...で止まる。HighSlide 4.1.4。
thum_imageの書き換え
忘れそうなのはここらから。毎回class="highslide" だのonclickなんちゃらだのやってられないのでthum_imageの出力タグに追加しますた。71行目付近のコレを・・
#thumbnail
} else {
my ($size_w, $size_h, $size, $format) = $org->Ping(qq!$image_dir$path/$thum_fn!);
$tag .= qq!<a href="$blosxom::url$path/$filename.htm">!;
$tag .= qq!<img src="$image_url$path/$thum_fn"!;
}
このように。
#thumbnail
} else {
my ($size_w, $size_h, $size, $format) = $org->Ping(qq!$image_dir$path/$thum_fn!);
$tag .= qq!<a href="$image_url$path/$image_fn" class="highslide" onclick="return hs.expand(this)">!;
$tag .= qq!<img src="$image_url$path/$thum_fn"!;
}
するとどうだ・・! サムネイル画像クリックで個別ページにジャンプしなくなり、HighSlideによるズーム描画が行われるハズ。個別ページではHighSlideは呼ばず、通常通りのthum_imageの挙動。
キャプション表示
キャプション表示用のclassはthum_imageプラグインを書き換えるのではなく、thum_imageのタグが呼ばれた直後に追記すればおけ。つまりblosxomのflavor、story.htmlを
$thum_image::image<div class="highslide-heading"><p>$title</p></div>
$body
...
このやうに。
サムネイルクリックから原寸表示完了までの時間
headにhs.expandDuration = ミリ秒で指定します。デフォルト250らしいよ。開いた画像を閉じるまでの時間はhs.restoreDuration = ミリ秒。他にもオプションいろいろあるんですが英語の壁は厚い。とりあえずsirokiriでの指定はこんなん。
<script type="text/javascript" src="http://...highslide/highslide-full.js"></script>
<script type="text/javascript">
<!--
hs.graphicsDir = "http://...highslide/graphics/";
hs.outlineType = "rounded-white";
hs.wrapperClassName = 'controls-in-heading';
hs.fadeInOut = true;
hs.expandDuration = 120;
hs.restoreDuration = 0;
hs.showCredits = false;
window.onload = hs.preloadImages;
// -->
</script>
枠の指定とかアルバムモードとかはサンプルhtmlのソースを覗くといいです。