そこで、私も自分のホームページに導入することにしました。
まず、以下のサイトからlightbox plusのパッケージを取ってきます。
http://serennz.sakura.ne.jp/toybox/lightbox/?ja#download
次にダウンロードしたディレクトリの下で
#zip形式のファイルを解凍
$ unzip lightbox_sample.zip
#解凍後に新たに生成したディレクトリに移動。
$ cd samlpe
#ディレクトリのツリーを見る
|-- file
| |-- cat_in_hole.jpg
| |-- cat_on_mac.jpg
| |-- cat_on_printer.jpg
| |-- evening.jpg
| |-- grass.jpg
| |-- road.jpg
| |-- sky.jpg
| `-- sleeping_cat.jpg
|-- index.html
|-- resource
| |-- blank.gif
| |-- close.gif
| |-- expand.gif
| |-- jojo.css
| |-- lightbox.css
| |-- lightbox_plus.js
| |-- lightbox_plus_min.js
| |-- loading.gif
| |-- next.gif
| |-- prev.gif
| |-- sample.css
| |-- shrink.gif
| `-- zzoop.gif
`-- tiny
|-- cat_in_hole_thumb.jpg
|-- cat_on_mac_thumb.jpg
|-- cat_on_printer_thumb.jpg
|-- evening_thumb.jpg
|-- grass_thumb.jpg
|-- road_thumb.jpg
|-- sky_thumb.jpg
`-- sleeping_cat_thumb.jpg
ここで、サーバー側のルートディレクトリにsourceディレクトリ以下のファイルをすべてアップロードします。
つぎに、htmlファイルのヘッダーに以下の三行をまるごとコピー＆ペーストします。
<link rel="stylesheet" type="text/css" href="./resource/lightbox.css" media="screen,tv"> <script type="text/javascript" charset="UTF-8" src="./resource/spica.js"></script> <script type="text/javascript" charset="UTF-8" src="./resource/lightbox_plus.js"></script>
次に、ボディの中で実際に拡大表示したい画像
<a href="./images/me_2.jpg" rel="lightbox"> <img src="./images/me_2.jpg" alt="研究室のlinuxパソコンと私" style="height:240px;width:320px;" align="right"></a>
のように、
<a href="./images/me_2.jpg" rel="lightbox">と</a>で、張り付けてあった画像の記述を挟み込みます。
たったこれだけでOKです(^^)
