Lightbox JS : Webとモーダルダイアログ

投稿者 nanki 2006-02-23 09:25:00 GMT

Lightbox JSを使ってみた。

<a href="large.png" rel="lightbox" title="...">
<img src="thumbnail.png">
</a>

というコードを書き、画像をクリックすると、ページ遷移は起こらずに、画面が半透明の膜で覆われ、その上に大きい画像が表示される。(実物を見るのが早い)

すぐに、これはモーダルダイアログの代わりになるなと思い、prototype.jsと組み合わせて、画像以外も表示できるか試してみた。

モーダルダイアログには使いにくいという印象しかないのでどうなることかと思いきや、思いのほか使いやすい。

思うに、WebにおけるUIというのはほとんどモーダルなのだ。設定画面を使ってる間、前の画面を操作することはない。 ページを遷移して、何かしらの操作をして、また戻る、という袋小路のようなページがたくさんある場合、これをLightbox風モーダルダイアログに置き換えても、得るものこそあれ、何も失うものはない。

都合のいいことに、ほとんどのモダンなブラウザに対応している上、Javascriptが動かなくても、ただのリンクにしか見えないので、よほどのことをしない限りはテキストブラウザ上でも今までと同様に動作する。

検索 UI の改善:NULL::something では、検索ボックスの結果がオーバーレイ表示される。(Lightboxは使ってなかったと思う&IEは未対応)

もうちょっと改良してみようかと思ったら、こんなのあった→Lightbox Gone Wild!

参考:

Lightbox JS

モーダルダイアログとは

検索 UI の改善

This entry was posted on 2006-02-23 09:25:00 GMT and カテゴリ , , . You can follow any response to this entry through the Atom feed. or a trackback from your own site.

タグ , ,


トラックバック

トラックバックリンク:
http://blog.netswitch.jp/trackbacks?article_id=70

コメント

  1. Nerice 2011-05-02 15:09:46 GMT:

    What a joy to find such clear thinking. Thanks for posntig!