Lightbox JS: Web 2.0 っぽい、画像サムネイル→拡大表示

2006年1月8日(日) 20時56分 by level
B ?

lightbox.js - Web2.0ライクな画像サムネイル生成 ― OpenStratus で紹介されていた、サムネイルから拡大画像をページ遷移させることなく表示させる Lightbox JS はほんとにクールです。

詳しい導入方法は、OpenStratus を参照していただくとして、どういう効果があるかは下の画像をクリックして確認してみてください。もちろん JavaScript を有効にするのをお忘れなく。なお、今回の導入にあわせてスタイルシートを少しいじったので、スタイルシートがキャッシュに残っているとうまく動かないかもしれません。Firefox であれば、SHIFT+リロードボタンでフルリロードするか、キャッシュをクリアしてみてください。

画像をクリックすると、ページ全体がグレイアウトし、中央にフルサイズの画像が表示されます。その画像をクリックすると元に戻ります。ね、クールでしょ。

通常、サムネイルから拡大画像を表示させる場合、拡大画像は新しいページに表示されるので、元のページ戻るには戻るボタンをクリックしたり、新しく開いたウインドウ(タブ)を閉じたりする必要があり、何枚も見ているといやになってしまいます。litbox を使うと、拡大画像をクリックするだけで元に戻るし、ページの遷移がないのでフラストレーションもかなり緩和されるのではないでしょうか。

ということで、基本的にメインコンテンツに JavaScript の使用を避けていたえむもじらでもついに導入してしまいました。ブラウザは、Firefox、Opera、IE で確認済みです。もちろん、JavaScript を切っている場合は通常の画像へのリンクと同じ動作となるのは確認済みです。

1/11更新

SmallStyle で紹介されていた、ポップアップ画像に title を付けるのをやってみました。

コメント (10)

1 1/08 22:49 隆作
(c1) [2006/01/08 22:49:14] by 隆作

かっけぇ~ し、いいなぁ~。

Google Bloggerでも採用して欲しい‥

2 1/09 00:29 arigayas
(c2) [2006/01/09 00:29:53] by arigayas

カッコいいですねコレ。
某所で公開しようかと検討している自分の下手絵のページに使わせてもらいます。(≧∇≦)

3 1/09 01:41 雨前線
(c3) [2006/01/09 01:41:26] by 雨前線

左右にスクロールするとグレーの塗り残しが出てきますね。
上下は大丈夫なのに。
リサイズすると直りました。

背景色を変えている訳ではないのかな?
(ソースを読まないで書いています。すみません)

4 1/09 10:38 level@管理人
(c4) [2006/01/09 10:38:38] by level@管理人

> 左右にスクロールするとグレーの塗り残しが出てきますね。
確かにそうですね。OperaやIEでも同じですね。

> 背景色を変えている訳ではないのかな?
コンテンツの前面に透過pngを敷き詰めているようです。

> Google Bloggerでも採用して欲しい‥
自分でJavaScriptなどを埋め込めばできそうです。
GreaseMonkeyスクリプトでもできちゃうかも。
だれかつくらないでしょうか?

5 1/10 01:02 通りすがり
(c5) [2006/01/10 01:02:27] by 通りすがり

なかなかクールでいい感じですね。
ただ、通常の画像と同じ操作ができなくなる
(右クリックメニュー、紙でページ保存、様々なユーティリティ、他)
のがマイナスかなー。
(昨今のFLASHのページも然り)

6 1/10 22:13 level@管理人
(c6) [2006/01/10 22:13:29] by level@管理人

> 通常の画像と同じ操作ができなくなる
どういう問題がありますか?

> 右クリックメニュー
通常の画像と何ら変わらないと思います(サムネイル、拡大とも)

> 紙でページ保存
印刷のこと? これも問題なし
画像の保存も問題無しです。

7 1/12 08:50 通りすがり
(c7) [2006/01/12 08:50:56] by 通りすがり

私の早とちりでした。
JavaScriptオフだと普通のimgタグと同じ動作をするんですね。
だったら問題無いです。(^^)

「紙でページ保存」ですが、「紙」はIE用のツールです。
説明不足ですみません。

8 1/13 15:56 iNo
(c8) [2006/01/13 15:56:54] by iNo

Googleイメージ検索用のGreasemonkey Scriptを作ってみました。

http://www.eonet.ne.jp/~wdf/software/fx_gm_googleimagelayer.html

9 1/13 17:27 level@管理人
(c9) [2006/01/13 17:27:20] by level@管理人

> Googleイメージ検索用のGreasemonkey Scriptを作ってみました。
すばらしい!
英語表記にすれば海外でも十分通用するのでは?

10 1/15 23:01 iNo
(c10) [2006/01/15 23:01:42] by iNo

> すばらしい!

ありがとうございます。

> 英語表記にすれば海外でも十分通用するのでは?

変数の書き換えで英語・日本語の切り替えが簡単にできるようにしてみました。

汎用的に使えるものも作ってみました。
http://www.eonet.ne.jp/~wdf/software/fx_gm_openimagelayer.html

トラックバック (1)

トラックバックは検索対象外です。