Lightbox JS v2.0 shortcut keys add-on

[追記 2007-04-12]

Lightbox 2 が v2.03 にバージョンアップして、キーボードショートカットの機能が改善されました。右カーソル、左カーソルでの移動が可能になり、Escキーで閉じることができるようになっています。ということで、このスクリプトは無用の長物と相成りました・・・

Lightbox JS v2.0 という画像をかっこよく表示させる有名なスクリプトがあります。複数の画像を「Image Set」として用意するとスライドショーが作成され、キーボードで前後に移動することができるのですが、nキーとpキーでしか移動できないので、あまり感覚的ではありません。そこで、カーソルキーでも移動できるようにしてユーザビリティを向上させるスクリプトを作成してみました。

»sample

使い方はカンタン。Lightbox JS v2.0 のスクリプトのあとに読み込むだけです。

&lt;script&nbsp;type=&quot;text/javascript&quot;&nbsp;src=&quot;js/prototype.js&quot;&gt;&lt;/script&gt;

&lt;script&nbsp;type=&quot;text/javascript&quot;&nbsp;src=&quot;js/scriptaculous.js?load=effects&quot;&gt;&lt;/script&gt;

&lt;script&nbsp;type=&quot;text/javascript&quot;&nbsp;src=&quot;js/lightbox.js&quot;&gt;&lt;/script&gt;

<strong>&lt;script&nbsp;type=&quot;text/javascript&quot;&nbsp;src=&quot;js/lightbox_shortcut_keys_addon.js&quot;&gt;&lt;/script&gt;</strong>

これで、以下のショートカットキーが使えるようになります。

次の画像へ nキー、→（右カーソル）、↓（下カーソル）
前の画像へ pキー、←（左カーソル）、↑（上カーソル）
閉じる xキー、oキー、cキー、Escキー

ちなみに開発のきっかけは、playback.js です。これを使ったプレゼンテーション資料がカーソルキーで移動できてすごく便利だったので作ってみました。

なお、不具合などあれば、お手数ですがご報告ください。よろしくお願いします。

About this entry

Published:: 2007/02/11

Category:: web development

Tags:: javascript, Lightbox

Response:: 6 comments | 0 trackback

Bookmark:: 11 users 9 users 4 users

オススメ

JavaScript

価格: ￥ 4,410

jyagi 02.11.07 / 6pm

あの、素朴な疑問ですみません。LightboxはクリエイティブコモンズBYですけど、こういう場合って著者の配布サイトにリンクを張るのみでよろしいんですか？

Yoshihide 02.11.07 / 7pm

>jyagi様
ご指摘ありがとうございます。
よろしくなかったですね。
配布するスクリプトのほうに、著作権の表記を追加いたしました。

rmaruko 02.12.07 / 3am

すごい便利！すばらしい。
←→ショートカットがあったらいいのにと思ってました。

jyagi 02.12.07 / 3pm

通りすがりで嫌味なコメントっぽくなって申し訳なかったです！でも私もこれすごい便利で良い感じだと思います。

クリエイティブコモンズの定義って曖昧というか少し難しいですよね。私自身も、もし自分のブログやサイトでライトボックスやyoshihideさんの物を使うとすれば、記事で一度だけ著作者の名前を出すだけでいいのかなど、いまひとつ作品の使用に際しての著作者表示の基準がわかってないのが現状です。

Yoshihide 02.12.07 / 10pm

>rmarukoさん
どうもありがとう。よかったら使ってください。

>jyagiさん
クリエイティブコモンズ、確かにわかりづらいですよね。日本語のページが提供されているのでまだいいですが。
Lightbox に関しては、原著作者のクレジットを表示すれば、二次的著作物を作成することができるとあったので、配布物のほうに著作権表記を入れておけばたぶん問題はないはずかと。

jyagi 02.13.07 / 2pm

再配布のときにクレジットさえ入れればいいんですよね。ありがとうございます。いや、日本でもライトボックス使ってるサイトたまに見かけるんですけど、クリエイティブコモンズ設定されてるから、使用の際に元著作者のクレジット明示してないのは大丈夫なのかなと疑問だったので。

コメントはこちらから

XHTML: 次のタグが使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Gravatar に対応しています。