煩悩日記

_ 【tDiary】Highslide JSを使うプラグインを作ってみた

ブログなどでよく使われている、サムネールから拡大表示をするJavascriptにLightbox JSや、Lightbox JS v2.0やその他似たものがあるけども、tdiaryの絵日記プラグイン(image.rb)を使ってサムネイル画像を表示するときにHighslide JSを使うようにするプラグインを作ってみた。

imageプラグインを使って表示していたら追加でこのプラグインを入れるだけで、既存のimage()呼び出しを触る必要がありません。

→image_highslideプラグイン配布場所

■使用例■(といってもバージョンをあげるたびに追随して挙動が変わるけど^^;)

神戸某所の駐車場ビル 霧雨の中で白く浮かぶヨドバシ梅田マルチメディア（悪役っぽい）

はじめはLightbox JSもさわってみたのだけど、

• 改造しないと、大きい画像をウィンドウサイズにあわせてくれないのではみ出す
• スライドショーとかimage.rbでかぶせるの面倒…
• インストールするときに環境(ディレクトリやURL)にあわせて書き換えないといけないところがある

のが、自分専用のプラグインではなく配布をすることを考えるといまいちだったので、Highslide JSにしてみた。

Highslide JSで気に入ってるのは

• シングルクリックで拡大・縮小(ズームのアクションも好き)
• ウィンドウ内に納まるサイズで画像を開いてくれる(等倍サイズでも開ける)
• 画像をドラッグして動かせる

あたり。

逆にHighslide JSで物足りないのは

• 読み込み中表示が目立たない(こっそり"LOADING"と出ているけど)
• 画像表示のときに、Lightbox JS のように背景ウィンドウを暗くするなど、画像を際だたせる表示がない

ぐらいか。

前者はどうでもよい。後者は今のスタイルシートをいじって黒縁にすればいいかな。

まあ、現バージョンのプラグインにも色々問題があるのだけど(script置き場が固定、cssも設定画面から変えられない)、そちらはそのうちに。