Lightbox 2.0.4 を導入してみました

このブログでは、画像を表示する際に “Lightbox” という Javascript のライブラリを用いています．Lightboxを使うと画像を表示するために新たにウインドウを開いたり、別なページに遷移しなくても現在のウインドウの上に画像をオーバーレイして表示することができます．一々ブラウザの『戻る』ボタンを押さなくて済むのでとても便利ですね．

Lightbox に関しての詳細は、開発元の Lokesh Dhakar さんのページ “Lightbox 2” をご覧下さい．最新版の V2.0.4 （ 3/09/2008 リリース）では、キーボードオペレーションに対応するなど、かなり大幅にソースコードが書き換えられています．

Lightbox 以外にも同様の機能を持たせた Javascript ライブラリとして、

・Lightview

・ThickBox 3

・LyteBox （Lightbox の改造版）
などがあります．それぞれ一長一短がありますが、自分の好みや用途に応じて使い分けると良いでしょう．

WordPress用の Lightbox や Lightview の プラグインなども出まわっているようです．Lightviewのプラグインを入れてみましたが、Wordpress 2.5 とは相性が良くないみたいで、エラーを起こして使えませんでした．ソースコードの主要部分が圧縮されていて、改造するのが面倒なので Lightview は今回はパスしました．

このブログでは、 Lightbox をV2.0.4へ切り替えるとともに、ユーザインタフェースを若干変更してみました．主な変更点は次の通りです．

・下部にボタンナビゲーションを追加
・キャプションの表示を２行に分け、title属性に セパレータとして “::” という文字を入れる

ことにより、表示を２行に分割するようにしました．

　　title=”abcdefg::hijklmn” の場合、１行目 “abcdefg”、２行目 “hijklmn” のように表示されます．

・画像を表示するエリアをスクロールするようにしました．

（前のバージョンは ” 固定配置 : position: fixed ” で行っていたため、画像表示エリアは固定された

　ままで、スクロールさせることができませんでした．小さな画面で見ている場合はコントロールが

　画面からはみ出してしまい不便でした）
・キーボードオペレーション（左右矢印キーで、前進、後退を、エスケープキーでクローズ操作）が可能
Lightbox とは直接関係ありませんが、Wordpress のカスタムギャラリーに “EXIF” タグのメタ情報を表示するオプションを追加して見ました．

---

カスタムギャラリー ［mygallery display=”lightbox” exif=”1″ ］

[mygallery display=”lightbox” exif=”1″ bgs=”background-color: #ddd;” imgs=”border: 2px inset #ddd;”]

---

JavascriptだけでEXIF情報を扱う方法について

WordPressとは関係なくLightbox 2.0 とJavascriptの世界だけでEXIFデータをハンドリングする方法については『JavaScriptでEXIFデータを読み込む方法』https://y2lab.org/blog/inet/web/exif_data_on_javascript-1005/ を参照下さい．