Home > MovableType > HighSlide JS

HighSlide JS

久しぶりに、「Movable Type」をカスタマイズしてみました。
結果、写真ブログの「indigo blue」がよりアクティブになったと思います。
写真をクリックすると、大きな画像が表示できるようになりました。
更にその大きくなった画像を(ブラウザ内で)ドラッグすることも出来ます(あまり意味はありませんが)。

Highslide JS

という、Java Scriptを利用して実現しています。

・スタイルシートの修正
・各テンプレートの修正

はあたりまえのように行ってますが、
このスクリプトをより便利に利用させて頂くために、MTのソース「CMS.pm」の修正も実施しています。

if ($thumb) {
# return <<HTML;
#<a href=”$url”><img alt=”$fname” src=”$thumb” width=”$thumb_width” height=”$thumb_height” /></a>
#HTML
#— add for Highslide JS —
my $fname4id = $fname;
$fname4id =~ s/\./\_/g;
return <<"HTML"; <a id="$fname4id" href="$url" class="highslide" onclick="return hs.expand(this)"><img src="$thumb" alt="$fname" title="Click to enlarge" width="$thumb_width" height="$thumb_height" border="0" /></a><div class="highslide-caption" id="caption-for-$fname4id"> ここに表題など </div> HTML #------------------------- } else {

↑ <>は、全角で表記してますが、当然半角に要変更です。
すでに、MT 3.35jaのリリースもアナウンスされてますし、こういう泥臭い加筆をしてしまうと、
バージョンアップ後、手作業による再修正が必要となる事が玉にきずですが・・・。
まあ、いろいろ書きましたが気に入ってます。

コメント:0

コメントフォーム
Remember personal info

*

Home > MovableType > HighSlide JS

楽天 トラベル
Recent Entry
Comments
feeds

Return to page top