lightbox plusを用いて、画像の拡大機能をつける。 at html

いろんな人のホームページ見ていますと、画像拡大機能がうらやましくなってくるものです。

そこで、私も自分のホームページに導入することにしました。

まず、以下のサイトから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です(^^)