JavaScript: Highslide JSでサムネイル画像表示をカスタマイズ

  • 投稿日:
  • by Chapa
  • カテゴリ:

公式サイト様：Highslide JS

参考：
・小粋空間　様 - Highslide JS でサムネイル画像を拡大表示する
・Lucky bag::blog　様 - Highslide JS-サムネール画像を拡大表示するスマートなjavascript
・Lucky bag::blog　様 - Highslide JS用アトリビュート追加-Movable Type（ムーバルタイプ）埋め込み画像カスタマイズ


20070409-001.jpg
この写真Clickで表示される様な、サムネイルの表示方法へ変更するカスタマイズです。

うちで採用した表示形式は「White 10px border and drop shadow（ボーダー・角・影つき）」です。
Download出来るScriptには、各種表示形式の表示例も同梱されてますので、サイトの背景色やお好みで色々試して選びやすいです。

上記サイト様のエントリーを参考に、サムネイル使用時に自動生成されるhtmlをHighSlide JS向けの物となる様に、Movable Typeインストール・ディレクトリ下/lib/MT/App/CMS.pmの

<a href="$url"><img src="$thumb" alt="$fname" width="$thumb_width" height="$thumb_height" /></a>

行を、

<a href="$url" class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)">
<img src="$thumb" alt="$fname" width="$thumb_width" height="$thumb_height" /></a>
と変更してみました。