謎解きウェブ

なぜなにどうして。

Lightbox JS v2.0

text:

小気味よい表示エフェクトとともに、カレントページへのオーバーレイ・イメージ効果を実現するJavaScript、「Lightbox JS v2.0」。けっこうお馴染みとなった感がありますが、微妙に問い合わせを受けたこともありエントリーしておきます。

上図はGoogle Analyticsで解析した、このブログの地域別アクセスを示したものです。このサイズでは小さくて見にくいので、実寸のオリジナル画像に飛ぶようにリンクを設定しています。

ポチッ。とクリックした方はお分かりかと思いますが、本来はページが遷移してリンク先の画像が表示されるところ、カレントページのまま、エフェクト効果を伴いながらオーバーレイでリンク先画像が表示されたことと思います。DHTML(Dynamic HTML)と言った方が正しいような気がするのですが、これもAjaxという技術のひとつです。WEB 2.0という言葉と同様、Ajaxもよく分からない位置付けの言葉になってしまっている気がする今日この頃。

作者の方はLokesh Dhakarさんという方ですが、このLightbox JSはその全てをDhakar氏が制作したものではなく、別の作者(Sam Stephenson氏)が制作したprototype.jsというJavaScriptフレームワークを利用して制作されたものです。オープンソース・マインドなグッジョブです。実際、Lightbox JSはクリエイティブ・コモンズの「帰属 2.5」というライセンスを採っているため、作者のクレジットさえ消さなければ、改変可能・商用も可能という非常に柔軟な利用法を許可されています。

使い方は異様なほど簡単。Lightbox JSをダウンロードし展開すると、JavaScript・CSS・画像が格納されています。まずはご利用の環境にあわせ、lightbox.jsとlightbox.css内の画像パスを適宜変更しておきましょう。

それを済ませた後は、JavaScriptとCSSを下記のような具合にヘッダ内に外部読み込みさせます。

<head>
...
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
...
<script language="JavaScript" type="text/javascript" src="js/prototype.js"></script>
<script language="JavaScript" type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script language="JavaScript" type="text/javascript" src="js/lightbox.js"></script>
...
</head>

bodyタグ内に既にonloadイベントが指定されている環境下では、コンフリクトでエラーを起こし動作しませんので、その場合には

<body onload="○○;initLightbox()">

などとすればOKです。これでとりあえず準備は整いました。

肝心の画像へのリンク設定に関しては、既存のやり方とほとんど変わりません。小さいサムネイル画像を用意し、その画像に対しオリジナルの画像が開くリンク設定をしてください。そのリンク属性にただrel="lightbox"を追記し、必要であらばtitleも追記すればよいのです。

<a href="(オリジナル画像パス)" rel="lightbox" title="(画像タイトル)">
<img src="(サムネイル画像パス)" /></a>

また、もし同じページ内に複数の画像リンクを設置しそれぞれをLightbox JSで見せたい場合には、もっと便利な機能が用意されています。rel="lightbox"とするところを

rel="lightbox[group]"

というような形でグループ名を指定してあげましょう。このように設定するだけで、アルバムのように画像を次々に見ることの出来るボタンが現れるようになります。イメージが湧きにくい方は、枚数は少ないですがこちらのエントリでの使用例を見ていただければと思います。

なおJavaScriptがオフになっている環境では当然動作しないのですが、その場合にエラーになるようなことはなく、通常どおりページ遷移をする形で画像が現れるだけですので、安心な仕様です。Lightbox JSを使うことで、無駄なウインドウを開くことも・ユーザーに「戻るボタン」を押させる手間をかけさせることも軽減されることになるでしょう。ユーザビリティの向上にもつながりますので、機会あれば積極的に使っていってもいいのかなという気がします。カスタマイズのしがいもありますしね。

とりあえずこのブログ用に外観を調整してみようかなと思ってみたり(またタスク増えた...)。