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

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

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

HighSlideはこんな感じ

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

サムネイルは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) コメントする

Maru-J 2008.09.04

はじめまして。
本日までトラックバックに気が付いておりませんでした。

弊blogのエントリーは、参考になりましたでしょうか?
素人の私ですが、お役に立てて良かったです。

 
BigJun 2010.03.20

はじめまして
ちゃんと変更したのですが
自動化されません
Highslideのヴァージョンはいくつですか?

 

トラックバック(0)

このブログ記事へのトラックバックURL:
http://1000leaf.net/MT41/mt-tb.cgi/154