画像を前面にポップアップさせる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の設定が完了してる状態になる。
コメント(2) コメントする
トラックバック(0)
このブログ記事へのトラックバックURL:
http://1000leaf.net/MT41/mt-tb.cgi/154
はじめまして。
本日までトラックバックに気が付いておりませんでした。
弊blogのエントリーは、参考になりましたでしょうか?
素人の私ですが、お役に立てて良かったです。
はじめまして
ちゃんと変更したのですが
自動化されません
Highslideのヴァージョンはいくつですか?