最近あちこちのサイトの画像表示法として使われているLightbox Jsを
今更ながら初めて触ってみた。
Lightbox
まず仕事で作ったサイトに組み込んでみたんだけども、以前は画像ごとに
別ウィンドウで表示させるためにそれぞれ一枚ずつhtmlファイルを
作っていた。
プログラミングのできる人ならテンプレートでページを自動作成、なんて
芸当ができるのかもしれないけど、理系の神に勘当喰らった僕にはまず無理なので
一枚ずつファイルを分けて作る、というアナログ的（?）な方法を
採っていたんである（笑わば笑え…）。
が、それでは当然、見せる画像が増えればファイル数も増えるわけで
管理するのが大変になる。
でも、Lightbox Jsを使えばそんな必要もないし、見栄えも良くFlashより軽い。
ただ、最新バージョンの2.04ではOS9のNetscapeでうまく動かなかったので
2.02を調達してきたが、それでも素晴らしい。
何がって、こういうものを開発できる人の才能が素晴らしい。
どうりであちこちで使われているはずだ。しかも無料だし簡単。
で、いそいそと自分のサイトのギャラリーコーナーにも組み込んでみた。
憂世絵画楼
もともとはギャラリーだけ別ウィンドウで開き、小さい画像をクリックすれば
大きい画像が開く、という方式にしていたので、そのウィンドウ用のファイルだけ
Dreamweaverのテンプレートで作っていた。
が、これも画像が増えるたびにファイルを作らなければならず、それが億劫だったけど
（そもそもサイト管理以外でDreamweaver使いたくないのだ、重いし。）
これで思い切り楽になった。
あまりにも感動した僕は寄付でもしようか、と思ったのだか、何故かうまくいかず断念。
難点は僕自身Javascriptがさっぱりわからない人間のため、カスタマイズがままならない、
ということと、何故かFirefoxだけは元ページにあるスクロールバーが見えてしまい、
横長のデータだと画像の上にスクロールバーが来てしまう、ということ。
これはブラウザ固有の問題だろうか。
だれか簡単にいじれる方法知ってる方いません？
-----------------------------------------------------------
LightBox Jsカスタマイズについて追記です。
PREVボタン、NEXTボタン、CLOSEボタンの変更と背景色の変更ぐらいなら
CSSが読めれば問題ないと思うので割愛します。
ただ、これだけだとあまりにも「そのまんま」なので、画像の上に
ギャラリー（憂世絵画楼）のロゴを入れてみる。
まずは必要な画像を作っておく。今回は、サイズは300px×30px。
lightbox.jsの180行目ぐらいに
// The rest of this code inserts html at the bottom of the page that looks similar to this:
//
// <div id="overlay"></div>
// <div id="lightbox">
// <div id="outerImageContainer">
// <div id="imageContainer">
.
.
.
というコメントが30行ほど続いているのが、生成されるLightBox部のhtmlのひな形。
この部分はもちろんコメントなので、スクリプトの挙動には一切関係ないが
作業中、および作業後にわかりやすいように、この部分にロゴ挿入部分の
タグを記しておく。
ロゴを入れるのは
<div id="lightbox">と
<div id="outerImageContainer">の
間に
// <div id="overlay"></div>
// <div id="lightbox">
// // <div id="UkiyoeLogo"></div> ロゴ部分
// <div id="outerImageContainer">
// <div id="imageContainer">
こんな感じ。
挿入した部分は後でわかりやすいように、スラッシュを余分にいれ、
最後にコメント文を入れておく。
その下のJavascriptの部分
var objLightbox = document.createElement("div");
objLightbox.setAttribute('id','lightbox');
objLightbox.style.display = 'none';
objBody.appendChild(objLightbox);
と
var objOuterImageContainer = document.createElement("div");
objOuterImageContainer.setAttribute('id','outerImageContainer');
objLightbox.appendChild(objOuterImageContainer);
間に
var objUkiyoeLogo = document.createElement("div");
objUkiyoeLogo.setAttribute('id','UkiyoeLogo');
objLightbox.appendChild(objUkiyoeLogo);
をはさみ込む。
var objLightbox = document.createElement("div");
objLightbox.setAttribute('id','lightbox');
objLightbox.style.display = 'none';
objBody.appendChild(objLightbox);
// LOGO
var objUkiyoeLogo = document.createElement("div");
objUkiyoeLogo.setAttribute('id','UkiyoeLogo');
objLightbox.appendChild(objUkiyoeLogo);
//
var objOuterImageContainer = document.createElement("div");
objOuterImageContainer.setAttribute('id','outerImageContainer');
objLightbox.appendChild(objOuterImageContainer);
こんな感じになる。ややこしそうだけど、変わっているのはカッコの中の値だけ、というのが
分かっていただければ、意外と簡単である。
（僕自身、そこ以外はいじれないので…）
次にlightbox.cssに
#UkiyoeLogo{background:transparent url(../images/ukiyoelogo.gif) no-repeat;
width:300px;
height:30px;
margin-left:auto;
margin-right:auto;}
を追記してやる。
尚、 うちのサイトはWinIEで見ると最初からずれているようなので、今回の変更が
ちゃんと見えてるかどうかの保証はしません。
なんか変だな、と思った方はFirefoxなりSafariなりで試してみてください。