[sb2][plugin] イメージヘルパーでHighslideJSを利用する
サムネイルをクールに表示する「HighslideJS」。
ですが挿入タグに面倒な部分が多いので、その部分をSereneBachのプラグイン「イメージヘルパー」で補う事で利用を容易にする方法です。
・HighslideJSの設置
[>>小粋空間: Highslide JS でサムネイル画像を拡大表示する]
3/27現在Highslideの最終バージョンが3.1.6なので細部は異なりますが、基本的な部分は小粋空間さんを参照するとよいかと。
いくつかの種類のサンプルの中「White outline with rounded corners」を例とします。
・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部分を画像に合わせたコメントにするなりご自由にどうぞ。
