2008年04月14日
Movable Type 4.X でHighslideを使う
今まで画像のエフェクトとしてLiteboxを使っていましたが、飽きてきたというのと、拡大できる画像が1つだけというのがちょっと気に入らないという点で、類似スクリプトであるHighslideを導入することに決定。正直かなり手間がかかるかなぁ～～～なんて思っていましたが、思ったよりすんなりいきましたね。一度@ET.のサイトで経験してるからかも？
以下、備忘録も兼ねて作業手順を記載。
手順 1.
Highslide JS – JavaScript thumbnail viewerからライブラリを入手。商用利用は有料ですが、非商用の個人利用は無料でできます。ただ、画像の左上にライセンスが表示されるのが難点。この辺りは、おいおい対処していきます。
上記リンク先でページを下にスクロールしていくと「Download」のブロックがあります。そこで「A personal website, educational site or other non-commercial use (free). 」をチェックして、「Download now!」ボタンを押すとダウンロードできます。
手順 2.
ダウンロードしたファイルを解凍すると、ルートディレクトリにいくつかの html ファイルとディレクトリがあります。それらのHTMLファイルと/images/の中身はサンプル用なので、必要ありません。
必要なのは、/highslide/ ディレクトリ以下に含まれていますので、/highslide/ 以下全てのファイルを任意のフォルダにアップロードします。当方の場合はルートの下にJava Scriptを集めた /js/というフォルダを作り、その下に必要なファイルをアップロード。ディレクトリ構造は、 /js/highslide/ となっています。
手順 3.
テンプレートのスタイルシート(styles-site.css)に、以下を追加。太字部分は環境に合わせて編集します。このへんのデザインは、各人の好みに合わせてもらって良いでしょう。
/*— Highslide JS —*/
.highslide {
cursor: url(http://makologg.myftp.org/js/highslide/graphics/zoomin.cur), pointer;
outline: none;
}
.highslide img {
border: 1px solid #fff;
}
.highslide:hover img {
border: 1px solid #f09;
}.highslide-image {
border: 2px solid #fff;
}
.highslide-image-blur {
}
.highslide-caption {
display: none;
border: 2px solid #444;
border-top: none;
font-family: Tahoma, Verdana, Helvetica;
font-size: 12pt;
padding: 5px;
background-color: #444;
color: #fff;
}
.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;
}
手順 4.
デザイン → テンプレートモジュール → ヘッダー の <body> タグ直下に以下の行を挿入。
<div id=”highslide-container”></div>
手順 5.
以下の行を<head> ～ </head>間に挿入。
<script type=”text/javascript” src=”http://makologg.myftp.org/js/highslide/highslide.js”></script>
<script type=”text/javascript”>
<!–
hs.graphicsDir = ’http://makologg.myftp.org/js/highslide/graphics/’;
hs.outlineType = ’rounded-white’;
hs.fullExpandTitle = ’実サイズに拡大’;
hs.restoreTitle = ”;
hs.focusTitle = ’クリックして前面に表示’;
// –>
</script>
</head>
手順 6.
(MTインストール先ディレクトリ)/lib/MT/Asset/Image.pm
を編集。MTを構成する重要ファイルですので、きっちりバックアップを撮っておいてください。下手をすると、MTが使えなくなります。まー、万一の場合は同一バージョンのMTを落としてきて上書きしてやればおそらく大丈夫でしょうが。もちろんこの辺は自己責任でお願いします。
この手順を行うことで、画像をアップロードすると同時に、Highslideのエフェクトを利用するためのタグが自動的に挿入されます。イチイチ毎回手動で記述するのは面倒極まりありませんからね。なんかこう、ナイスなプラグインがあればこんな苦労はしなくて済むんだけどなぁ…。MTはお気に入りのソフトなんですが、こういうときは遊び心に欠けているように感じますね。
以下の行数はオリジナルのものです。変更を加えていくと若干ずれてくると思いますので、そのへんご注意ください。
249行目付近を以下の通り変更(白字は位置検索用、青字が追加箇所)
my $fname = $asset->file_name;
require MT::Util;my $fname = $asset->file_name;
require MT::Util;
my $mytemp = $fname;
$mytemp =~ s|\.|\_|;
my $myalt = $mytemp;
276, 278, 280行目を以下のように変更。換えなくても問題はないですが、マージンが20pxもあるのが気に入らないので自分用にカスタマイズしています。
$wrap_style .= q{style=”float: left; margin: 0 5px 5px; 0;”};
$wrap_style .= q{style=”float: right; margin: 0 0 5px 5px;;”};
$wrap_style .= q{style=”text-align: center; display: block; margin: 0 auto 5px;;”};
312行目以降を以下のように変更
【変更前】
if ( $param->{thumb} ) {
$text = sprintf(
’<a href=”%s”><img alt=”%s” src=”%s” %s %s /></a>’,
MT::Util::encode_html( $asset->url ),
MT::Util::encode_html( $asset->label ),
MT::Util::encode_html( $thumb->url ),
$dimensions,
$wrap_style,
);
}
【変更後】
if ( $param->{thumb} ) {
$text = sprintf(
’<a class=”highslide” onkeypress=”return hs.expand(this)” id=”%s” onclick=”return hs.expand(this)” href=”%s”><img alt=”%s” src=”%s” %s %s /></a><div class=”highslide-caption” id=”caption-for-%s”><center><strong>%s</strong></center></div>’,
$myalt,
MT::Util::encode_html( $asset->url ),
MT::Util::encode_html( $asset->label ),
MT::Util::encode_html( $thumb->url ),
$dimensions,
$wrap_style,
$myalt,
MT::Util::encode_html( $asset->label ),
);
}
Posted by 法条 真琴 at 09:31 | Category: Movable Type | Comments [0] | Trackbacks [0]
