豆知識
Lightbox
JavaScript
ここ数年で、多くのWEBサイトでJavaScriptが活用されるようになりました。JavaScriptを用いることで、従来のHTMLやCSSのみで構築されたWEBページに比べ、利便性やページの演出を格段に向上させることができます。
JavaScriptが急速に普及した背景には、AJAX(Asynchronous JavaScript + XML)と呼ばれる技術の登場があります。AJAXを用いることで、WEBページの内容を画面遷移無しで書き換えることができるようになります。現在ではAJAXに対応した各種JavaScriptライブラリが開発され、手軽に扱えるようになっています。
JavaScriptのネックだった「ブラウザ間の非互換性」は基本的にライブラリが吸収してくれます。また、「処理速度」もブラウザのJavaScriptサポートの強化によって飛躍的に向上しているので、複雑なJavaScriptを使っても、快適なブラウジングが行えるようになりました。
当コラムで紹介する『Lightbox』は、オススメJavaScriptの1つです。
Lightbox
画像へのリンクをクリックすると、画面が暗くフェードアウトされ画面中央に拡大された画像が表示されるページ。初めて見たときはちょっとビックリしましたが、最近はよく見かけるようになりました。本サイトでも利用しています。
この表示方法であれば、スムーズなアニメーション付きで美しく画像を表示することができます。また、操作性も非常に優れていますよね。
実はこの効果、あなたのサイトにも簡単に取り入れることができます。
- Lightbox 2
- Lightboxは、画像をJavaScriptで表示するライブラリの元祖。現在はそのVersion 2が公開されています。
Lightbox設置手順
まずは、Lightbox 2のサイトへ行き、「lightbox2.**.zip」をダウンロードしましょう。ダウンロードした「lightbox2.**.zip」を展開します。展開すると、「lightbox2.**」というフォルダ内に「css」「images」「js」の3つのフォルダと「index.html」が作成されます。
「lightbox2.**」フォルダを、「lightbox2」にリネームし、サイトのルートディレクトリに移動させます。
ルートディレクトリ以外の場所に置いた場合は、以下の手順を適宜読み替えて下さい。
Lightboxを使用したいページのHTMLファイルのヘッダ（<head>〜</head>の間）に以下のコードを挿入します。
<script type="text/javascript" src="/lightbox2/js/prototype.js"></script>
<script type="text/javascript" src="/lightbox2/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/lightbox2/js/lightbox.js"></script>
<link rel="stylesheet" href="/lightbox2/css/lightbox.css" type="text/css" media="screen" />
最後に、画像ファイルへリンクを張っている<a>タグにrel="lightbox"属性を追加します。また、title属性に画像のタイトルを設定しておけば、画像の左下部分にタイトルが表示されるようになります。
<a href="〜〜〜.jpg">〜〜〜</a>
↓
<a href="〜〜〜.jpg" rel="lightbox" title="タイトル">〜〜〜</a>
以上で、Lightboxの設置は完了です。
lightbox2/index.html, lightbox2/images/image-1.jpg, lightbox2/images/thumb-1.jpgは動作に必要の無いファイルです。削除しても構いません。
Slimbox 2
Lightboxはとても有名な画像表示スクリプトです。そのため、「Lightbox系〜」や「〜box」と呼ばれるように、数あるクローンが作成されています。それぞれ、「機能拡張されている」「動作が軽い」「カスタマイズができる」など、いろいろな特色を持っています。
『Slimbox 2』もその1つで、高い軽量性を謳っているものです。Ligtboxとの互換性が高く、ほぼ書き換えなしで移行可能なことが大きな特徴です。
- Slimbox 2, the ultimate lightweight Lightbox clone for jQuery
- Slimbox 2は、jQueryライブラリを使って、構築されたLightboxのクローン。当サイトで利用しているのはこちら。
設置方法は、基本的にLightboxと同じです。ただし、Slimbox 2はjQueryライブラリを使用するので、別途ダウンロードしてくる必要があります。
Slimbox 2(slimbox-2.**.zip)をダウンロードして、展開したフォルダを「slimbox2」に変更し、サイトのルートディレクトリに配置します。
jQueryライブラリをダウンロードし、「slimbox2/js/jquery.js」に置きます。
HTMLのヘッダに以下を追加します。（既にLightboxを設置している場合は、Lightboxのコードを置き換えます。）
<script type="text/javascript" src="/lightbox2/js/jquery.js"></script>
<script type="text/javascript" src="/lightbox2/js/slimbox2.js"></script>
<link rel="stylesheet" href="/lightbox2/css/slimbox2.css" type="text/css" media="screen" />
画像ファイルへリンクを張っている<a>タグにrel="lightbox"属性を追加します。また、title属性に画像のタイトルを設定しておけば、画像の左下部分にタイトルが表示されるようになります。
<a href="〜〜〜.jpg">〜〜〜</a>
↓
<a href="〜〜〜.jpg" rel="lightbox" title="タイトル">〜〜〜</a>
LightboxからSlimbox 2へ移行する場合は、<a>タグの部分を書き換える必要はありません。移行に必要な作業はヘッダの部分を書き換えのみとなります。
slimbox2フォルダ内のREADME.txt, example.html, example.jpgは動作に必要の無いファイルです。削除しても構いません。
