lightbox Ajax

lightbox 2.0　公式ページ


lightbox 2.0は、ページ内の画像を拡大する人気のあるツールです。画像をクリックすると、ページ遷移無しにページ内のコンテンツを背景にして画像を拡大してくれます。

lightbox 2.0の公式サイトのダウンロードページからLightboxのzipファイルをダウンロードして解凍します。本記事執筆時点では、Lightbox2.04を配布してますが、解凍されたフォルダーには、index.html(サンプルファイル)、jsフォルダ、imagesフォルダ、cssフォルダが存在します。

サンプルのindex.htmlを閲覧していただくと、インストールの仕方が分かりますが、ここでも簡単に解説したいと思います。

HTMLの編集

htmlのheadの領域に以下の３行を入れます（表示の都合で４行になっていますがご了承願います）。ligthbox2.0は、prototype.jsとscript.aculo.usをベースに作られているので、JavaScriptを読み込む順番が必ず以下の順番になるようにします。各JavaScriptライブラリーファイルは、jsフォルダーの中に入っています。

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

CSSファイルの読み込み

lightbox.cssを読み込むように、htmlのheadの領域に以下を記入します。

<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />

HTML bodyへ記入

拡大イメージを設定する所はたったの１行です。以下の例のように、rel=”lightbox”と書くだけでOKです。あとは、”拡大したい画像のファイル名”と”画像のタイトル”、”画像ファイルのイメージ”の所に必要な情報を記入すれば動きます。

<a href=”images/拡大したい画像のファイル名” rel=”lightbox” title=”画像のタイトル”>画像ファイルのイメージ（imgタグを使う）</a>

複数の画像を扱う場合は、rel=”lightbox[group1]”のようにカギ括弧の中にグループ名を入れると同じグループとして扱われ、画像を表示した時に番号が自動で付与されます。

引用元：http://ajax.studynet.jp/