『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』をチョイスした。

Blogger に使えそうな画像表示 Javascript ライブラリ etc...

Bloggerにupした画像のもう少しマシな見せ方はないかとちょっと探してみた。

LightBoxでシンプルに

Lightbox 2

動作が安定しているのでライトボックスの中ではこれがおススメかな?
『Script.aculo.us』と『prototype』を使用しています。

jQuery lightBox plugin

上の『2』と見た目にはほぼ同じ。
これは jQueryのプラグインになります。
上の『2』も含めてサンプルがあるのでそれをベースに移植すれば簡単に出来そう。

その後、これを使用してみたが動作に不満があったので『Highslide JS』に換えた。
参考：『lightBox 0.5』から『Highlside JS』に変えた訳

Lightbox JS

これが一番シンプルで簡単に取り入れられそう。
該当のjsファイル以外にライブラリを必要としないところが良い。
上記『LightBox2』の初期バージョンのようだ。

ThickBox

ソースを見ると、かなりシンプルなつくりなのが解る。故に動作もシンプル。
jQueryのプラグインで、jQueryのサイトから。

FancyZoom

画像を拡大表示させるときのEffectは「おおぉ」と思わせるが、それ以外の作りについては雑な印象。

facebox

これもjQueryを使用します。
jQueryを使用したものの中では一番 cool な印象。

ライトボックスの亜種は他にも多数存在するのでここにないモノもいろいろ試してみるのも良いかと。

おススメ

Highslide JS

これはいいなぁと思うがなんか面倒そう。サンプルだと画像の左上に「Powerd by Highlight JS」と出るのだが、これ消しても問題ないのか？実際は出ない？設定で非表示にすることも可能。
結局私はこれに落ち着いた。

スライドさせるなら

JQuery Cycle Plugin

いろんな動作が見られて「こんなことができるのか」と関心。ただブログに画像貼り付けるだけじゃ面白くないので、こう言う見せ方したらスペースも取らないし良いかな。

複数の画像を表示させるパーツとして

jQuery: jqGalScroll v2.1

縦 or 横方向にスライドさせるのだが中身を見ると例えば横方向にスライドさせるなら画像のコンテナのWidthが画像の合計Width分取っているようでちょっと腰が引ける。
低スペックのPCだと重くないか?

追記:jQueryのバージョンアップに伴い現在使用不可。(2009/03/10)

AJAX SlideShow

GoogleのAPIサンプル。このサンプルではFrickerの画像を引っ張ってきて表示している。シンプルだからFrickerのユーザーが自分のブログに載せたいならこれ使うのが手っ取り早い。

何をチョイスするにしてもHTML(XML)とJavascriptについて多少の知識は必要で、またjsファイルをアップロードする場所の確保も必要です。

『lightBox 0.5』を触ってみた

HTML,XML,CSSを触り出したら必然的に触りたくなるAjax関連。
ということで、簡単そうで視覚的にも分かりやすい『lightBox 0.5』を触ってみました。

『SkyDrive』の方の実験と兼ねていたので少々手間取ったがやってることは実に簡単で、Javascriptのことを余り知らなくてもイケちゃいます。

Web上の何処かにjsファイルをアップロードしなければならないのでGoogle Page Creator(GPC)の方に置いて実装してます。

表示される画像はSkyDriveにupして一つ一つ引っ張ってきてます。(えらい面倒で二度とやらない!)

lightBox 0.5 Demo

で、こちらがそのjQueryを使用したページですのでお暇なら触ってみてください。
実は画像選びや色を統一する加工の方が大変だったりして…
あまり苦労の跡が感じられないのが悲しかったりする。

jQuery lightBox plugin:

こちらが今回使用したlightBoxの入手先。
私でも理解できるほど簡単で、英語ができなくても理解できるdemoも用意されているので、ただ外国のサイトから取って貼り付けただけの日本の似非Geekのサイトを見るよりよっぽど参考になるので見てきてほしい。

追記:
『lightbox』と名のつくモノは複数あり、このlightbox0.5はお薦めしません。
理由は以下の投稿にてご確認ください。
･humming bird: 『lightBox 0.5』から『Highlside JS』に変えた訳