Lightbox JS v2.0 shortcut keys add-on

[追記 2007-04-12]

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

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

Lightbox JS v2.0 shortcut keys add-on

»sample

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

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/lightbox_shortcut_keys_addon.js"></script>

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

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

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

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

Lightbox JS v2.0 shortcut keys add-on」への6件のフィードバック

  1. jyagi

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

    返信
  2. Yoshihide

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

    返信
  3. jyagi

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

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

    返信
  4. Yoshihide

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

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

    返信
  5. jyagi

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

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>