LightBox解説と実験のページ

ホーム

LightBox(By Lokesh Dhakar)を実行すると以下のようになります。

解説

サムネイル(上に表示されている小さな画像)のいずれかをクリックすると、画面全体がフォトアルバム風のビューアーに切り替わります。
背景は元のページが暗く写りこみ、各画像の下側にはタイトル、ポインター(現ページ/総ページ)、CLOSEボタンが現れます。
画像にマウスポインターを移動すると左半分でPREV(戻る)、右半分でNEXT(次へ)の各ボタンが現れる仕組みになっています。

LightBoxを使うと、ホームページの中に、このようなフォトアルバム風のビューアーを実装できます。
BOφWY時代の布袋寅泰さんは神様です!/機材 hiroshi's Equipmentにて実際の使用例を確認することもできます。

実験

LightBoxコントロールを実装する際、imagesフォルダー、imgフォルダー、HTMLページ(この場合lightbox.html)は同じ階層に配置します。
例として、このページの構成を以下に表します(これは、単に構造を示すためですのでファイルリンクしていません)。

以下にLightBoxコントロールを実装する際必要になるタグや、ファイルなどをまとめてみました。

1.LightBox(By Lokesh Dhakar)ダウンロード

2.lightbox.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>LightBox(By Lokesh Dhakar)/hiroshiのホームページ作成テクニック</title>
<meta http-equiv="imagetoolbar" content="no">
<link rel="stylesheet" type="text/css" href="../css/hiroshi1986.css" />
<link rel="stylesheet" type="text/css" href="css/lightbox.css" media="all">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</head>
<body>
<h1>LightBox(By Lokesh Dhakar)を実行すると以下のようになります。</h1>
<a href="img/22.jpg" rel="lightbox[album]" title="オオクワ">
<img src="img/2.jpg">
</a>
<a href="img/33.jpg" rel="lightbox[album]" title="セブン">
<img src="img/3.jpg">
</a>
<a href="img/44.jpg" rel="lightbox[album]" title="hiroshi with zephyr">
<img src="img/4.jpg">
</a>
</body>
</html>
<head>タグ内のツリービュー関連ファイル呼び出し
HTMLから呼び出すライトボックス関連ファイルは<head> 〜 </head>の間にパスを通して記述します。
元ファイルはダウンロード後展開したYUIフォルダーの中の次の場所にあります。
lightbox/js/effects.js
lightbox/js/lightbox.js
lightbox/js/prototype.js
lightbox/js/scriptaculous.js
lightbox/css/lightbox.css

<body>タグ内のツリービュー読み込み用タグ(例)
<a href="img/22.jpg" rel="lightbox[album]" title="オオクワ">
<img src="img/2.jpg">
</a>
<a href="img/33.jpg" rel="lightbox[album]" title="セブン">
<img src="img/3.jpg">
</a>
<a href="img/44.jpg" rel="lightbox[album]" title="hiroshi with zephyr">
<img src="img/4.jpg">
</a>

3.lightbox.css

このファイルは、LightBox(By Lokesh Dhakar)ライブラリのものを、そのままコピーして使いましょう♪
元ファイルはダウンロード後展開した lightbox/css/lightbox.css です。
4.LightBox本体用の画像

これらはフォトアルバムではなく、LightBox自体の外観(背景イメージ、ボタンなど)のための画像です。
フォトアルバム(img:フォルダー)と区別するために別名のフォルダー(images:フォルダー)に格納します。
元ファイルはダウンロード後展開した lightbox/images/ にあります。

blank.gif
close.gif
closelabel.gif
loading.gif
next.gif
nextlabel.gif
prev.gif
prevlabel.gif