画像を前面にポップアップさせるJavascript HighSlideを導入した

画像のポップアップにはlightboxってのが流行ってるみたいなんだけど、あれはブラウザ全面を占有してしまって本文を読みながら写真を見るってことが出来ないのが嫌。
なので、HighSlideを使うことにした。

写真を見てもらいたいならlightboxでいいんだろうけど、このブログの写真なんて話の腰を折ってまで見てもらうものではないからね。
HighSlideだと拡大した後の画像をドラッグして位置を変えることが出来るから邪魔にならないし。

HighSlideはこんな感じ

• 下のサムネイル画像をクリックすると拡大表示。拡大後の写真をクリックすると縮小。
• 複数の画像を同時に拡大することが出来る。
• 拡大後の画像をドラッグすれば好きな場所に移動させることが出来る。
• ブラウザのウィンドウサイズによって拡大画像の大きさは自動で調整される。ただし、元画像より大きくはならない。

サムネイルはMovableType4が自動生成するので写真を一枚用意すればOK。

HighSlideを導入

下記サイトを参考に、ダウンロードとインストールをして、とりあえず使える状態にする。

小粋空間：Highslide JS でサムネイル画像を拡大表示する
Maru-J Blog - Movable Type 4 で Highslideを利用する

普通のサイトであれば、ここまででOK。

MovableType4と共存させる

このブログはMovableType4を使ってるんだけど、MT4で記事に埋め込んだ写真のタグをいちいち書き換えるのは面倒くさいので、下記サイトを見ながらMT4を改造をする。

Maru-J Blog - Movable Type 4 で Highslideを利用する Part2

すると、画像をアップロードして、記事にサムネイルを埋め込んだ時点でHighslideの設定が完了してる状態になる。