・CSSの抜粋
「example-white-rounded-outline.html」を開き、スタイルシート設定部分をグローバル部(* {〜})を除いて抜粋し、「highslide.css」というファイルで保存する。
保存場所は highslide.jsと同じ場所にすると管理が楽かな？

.highslide {
cursor: url(highslide/graphics/zoomin.cur), pointer;
outline: none;
}
.highslide img {
border: 2px solid gray;
}
.highslide:hover img {
border: 2px solid white;
}

.highslide-image {
border: 2px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
display: none;

border: 2px solid white;
border-top: none;
font-family: Verdana, Helvetica;
font-size: 10pt;
padding: 5px;
background-color: white;
}
.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}
.highslide-loading {
display: block;
color: white;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 3px;
border-top: 1px solid white;
border-bottom: 1px solid white;
background-color: black;
/*
padding-left: 22px;
background-image: url(highslide/graphics/loader.gif);
background-repeat: no-repeat;
background-position: 3px 1px;
*/
}
a.highslide-credits,
a.highslide-credits i {
padding: 2px;
color: silver;
text-decoration: none;
font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
color: white;
background-color: gray;
}

画像の指定がしてある所は http://〜 を含めたフルパスで指定すると間違いないかも。

・テンプレートにスクリプトインクルード
</head> 前にHighslideJSのスクリプト、CSSファイルを挿入。

<script type="text/javascript" src="{site_top}highslide/highslide.js"></script>
<script type="text/javascript">
hs.graphicsDir = '{site_top}highslide/graphics/';
hs.outlineType = 'rounded-white';
window.onload = function() {
hs.preloadImages(5);
}
</script>
<link rel="stylesheet" href="{site_top}highslide/highslide.css" type="text/css" media="screen" />

・イメージヘルパーの設定
Exif情報なしのテンプレートの方に

<a id="thumb%image_id%" href="%file_url%" class="highslide" onclick="return hs.expand(this, {captionId: 'caption%image_id%'})"><img src="%thumb_url%" alt="%image_name%" title="Click to enlarge" height="%thumb_height%" width="%thumb_width%" /></a><div class='highslide-caption' id='caption%image_id%'>%image_name%</div>

を記入。

青字の部分はイメージヘルパーの改造による部分ですので、未改造の方は「%image_width%%image_height%」にするなど、他の画像とかぶらない英数字を入れるようにしてください。

・使う
普段の利用のようにイメージ挿入プルダウンから挿入する画像を選ぶ事でHighslideJS用のタグが挿入されますので、そのまま使うもよし、Caption部分を画像に合わせたコメントにするなりご自由にどうぞ。



＜＜続きを隠す

ImageHelpler.pm 196行目

$text =~ s/$name_tag/$image_name/g;
my $image_id = $imag->id();
my $id_tag = '%image_id%';
$text =~ s/$id_tag/$image_id/g;
$text = '<option value="' . $text . '">' . $imag->name . '</option>' . "\n";

*赤字の部分を追加

一応説明文にも追加
imagehelper.html 46行目

<li class="odd">%exif_comment% : コメントを表示します。</li>
<li class="even">%image_id% : イメージIDを表示します。</li>
</ul>

*赤字部分を追加

以上。

＜＜続きを隠す