『lightBox 0.5』から『Highlside JS』に変えた訳

以前、このブログでは画像閲覧用に『lightBox 0.5』を使用していたが、現在は『Highslide』を使用している。
その理由について、『lightBox 0.5』のバグ報告も兼ねて。

本当にそうなるのか実際に試したい場合は以下にサンプルがあるのでこれで試してみると良い。

[Enter] キーを押すと重ねて表示される

『lightBox 0.5』の動作はWebページに表示されているサムネイルをクリックするとリンクされた画像をレイヤーを上から重ねたように表示するが、その状態で[Enter]キーを押すとまたその上にレイヤーを重ねるように表示してしまう。通常画像以外の背景は50%程度透過している(透過値は設定で変更可能)が、[Enter]キーを押し続ければこんなことになる。



画像表示中は[Enter]キーを無効にするか、もしくは画像表示中に[Enter]キーを押された場合は画像を閉じるといった制御にすべきと考える。

IE7でのバグ

IE7では画像表示中に[Enter]キーを押すとこのようになる。




こうなるとページを再描画するしかない。これは致命的。

[Esc]キーを押しても無反応

『lightBox 0.5』自体キー操作は一切対応していない、というわけでもなく『←,→』キーで画像が切り替わる。ならば[Esc]キーを押した時は画像を閉じるという動作がなぜ実装されないのか不思議。ちなみに『Highslide JS』では[Esc]キーを押すと画像が閉じる。

jsファイルが読み込まれる前に画像を表示しようとすると画像をローカルに保存してしまう

完全にlightBox.jsファイルが読み込まれていない状態、Webページが描画されてすぐに画像のサムネイルをクリックし、画像を表示させようとすると該当の画像ファイルをローカルに保存してしまうのだ。通常考えられるのはスクリプトを無効にした状態と同じ動作、例えば別ページで該当の画像のみを表示するような動作なら理解できるがダウンロードしてしまうのは頂けない。

比較対象として『Lightbox 2』の動作を確認

『Lightbox 2』ではこのような動作はないようだ。[Esc]キーを押せば画像は閉じられるし、[Enter]キーを押せば画像を再描画するという動作で「これはこういう仕様」という範囲。ちょっと触った程度だがIE7でもちゃんと動作した。

結論:
完全にチョイスミス…
ライトボックスを使用するなら『Lightbox 2』を使用するべし。
しかし、『Highslide JS』の方が表示した画像をドラッグして移動できるなど、閲覧者側にとっての自由度が高い分、こちらの方が良いかも、ということで『Highslide』をチョイスした。