2007年02月25日
Highslide JS
昨日から画像のポップアップ方法を変更しました。
こちらのJavaScriptを利用する事で、サムネイル画像が滑らかに拡大表示されます。ただし、当サイトのようにJavaScriptを多用している場合、正常に動作しない事も[:cry:]
まずは直前のエントリーで動作を確認してみてください[:-)] Gecko系のブラウザーをお勧めします（IE7やOperaでは他のJavaScriptと干渉して思わぬ所からポップアップしてしまう・・・一応動作してますが[:sweat:]）。
設置方法は簡単です。
Highslide JSよりスクリプトをダウンロードし、展開してhighslideフォルダーをアップロード。テンプレートをちゃちゃっと編集後、Highslide JS用CSSを追加すれば完成！[:-D] 詳しくは小粋空間さんの「Highslide JS でサムネイル画像を拡大表示する」をご覧あれ。
当サイトで紹介するのはここからです[:-)]
このままでは毎回画像をアップする毎にHighslide JS用の記述に直す必要があるので、ここではMTのアップロードフォームを改造します。とは言っても大袈裟な改造ではありません。当サイトでは以前から行っていたものなので、その部分を書き換えるだけ・・・
その改造とは、アップロードフォームの縮小画像作成「埋め込み」をHighslide JS用にしてしまいます。
「MTディレクトリ/lib/MT/App/CMS.pm」の4803行目を以下のように書き換えます。
オリジナル：
<a href="$url"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>
↓ ↓
修正後：
<div id="highslide-container"></div><a href="$url" class="highslide" onclick="return hs.expand(this)"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>修正が終わったら保存して上書きでアップし直します（CMS.pm行数はv3.34を前提にしています）。
以上で完了！
注！
小粋空間さんの説明通りに設置しても動作しない状態での改造は無意味です。動作するようになってから挑戦してください！
なお、この書き換えを行った場合は小粋空間さんの「４．ポップアップ用空要素設定」の空要素は削除してください。上記修正により、新たに追加されます！
また、captionを利用する場合はIDを設定して直後に追加する必要があります。WEBデザインBLOGさんの「埋め込み画像生成ファイルperlスクリプト」の項にID作成のヒントがあります。