KATZLIN'S blog

Contents

Lightbox JS をいれてみた2006-11-16 00:21

調べものをしていてナイスな Javascript を見つけた。Lightbox JSだ。フラッシュみたいな動きで画像が表示されるのがなかなかカッコよくて、ひとめぼれしてしまった。

ウェブページはなるべく軽く、といつも思っているが、最近のパソコンは高性能だし、これくらいの仕掛けのページがいくつかはあってもいいかな、と弁解しつつ、ためしに先日 の仏像展のブログのエントリー と、こことかここ みたいな画像がメインのページに入れてみた。あんまり重くていらいらするようなら止めるかもしれないが、とりあえずはこれから徐々に増やしていこうと目論んでいるしだい。

導入は簡単だったが、loading.gif と closelabel.gif がリンクできなかった。が、これは CSS の方で http:// から始まる絶対指定にしたら上手くいった。また、ダウンロードしたオリジナルのものからディレクトリ構造を少し変えたほか、CSS で枠をつけたり背景を黄色にしたり、Mozilla/Firefox 用に角を丸めたりと少しいじってみた。


Lightbox JS のいいところは、ブラウザで Javascript をオフにしていても、通常のリンクとして機能するということだ。クリックするとちゃんと画像が開くのだ。Javascript をオフにしていてもストレスなくページが閲覧できるというのは大切だと思う。
また、今回使ってみた ver. 2.2 では、画像のグループ化とともに、キーボードで送り・戻し・閉じることができるようになっているのもいい。自分はどちらかというとマウスよりはキーボードを使って操作する ことが多いので、こういう仕様は大歓迎だ。

しかし、やはりもっさり感はつきまとう。体感的には Firefox が一番速いように思う。IE はまあまあで、メインで使っている Opera が一番遅いようだ(泣)。また、Opera は現行の 9.02 だと画像にも opacity がかかって半透明になってしまうことがときどきある(泣)。Opera 側ののバグなんだろうと思う。

最大の難点はウィンドウサイズよりでかい画像だと画面からはみだしてしまうところだろうか。このままでは拙サイトのぐるぐる写真館 なんかには使えない。
と思いつついろいろ探りをいれると、やはり偉い人はいるもので、このスクリプトを改造した Lightbox Plus というのが公開されていた。これ、画像の拡大縮小もできるし、マウスでつまんで動かせるし、おもしろくてたいへんいい。と思ったが、肝心の CSS が思うようにいじれないので導入は見送ることにした。

コメント

トラックバック

このエントリのトラックバックURL: http://katzlin.asablo.jp/blog/2006/11/16/6652802/tb