Lightbox2サイトの「How to use」に少し手を加えて、以下の手順としました。また、画像ファイル、及び、そのディレクトリーについては例示です。
|
| １ |
表示させたい画像ファイルを何枚か用意する
| 小画像 |
flowerA1.jpg flowerB1.jpg flowerC1.jpg |
| 大画像 |
flowerA2.jpg flowerB2.jpg flowerC2.jpg |
|
| ２ |
アルバムファイル「albumn.html」を作り、小画像を並べる
| <IMG src="flowerA1.jpg" width="160" height="110"
border="0"> |
| <IMG src="flowerB1.jpg" width="160" height="110"
border="0"> |
| <IMG src="flowerC1.jpg" width="160" height="110"
border="0"> |
|
| ３ |
「Lightbox2」をダウンロードし、解凍する
| 生成された3つのホルダー [CSS],[images],[js] を「albumn.html」と同じディレクトリーにコピーする |
|
| ４ |
「albumn.html」header内に順番に、次の3行を記述する
| <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> |
|
| ５ |
同じく、header内に次の1行を記述する
| <link rel="stylesheet" href="css/lightbox.css" type="text/css"
media="screen" /> |
|
| ６ |
「albumn.html」を次のように修正すると、小画像をクリックすることによって大画像が表示される
| <a href="flowerA2.jpg" rel="lightbox" title="my caption"><IMG src="flowerA1.jpg" width="160" height="110"
border="0"></a> |
|
| ７ |
大画像を次々に表示させるには、さらに次のように修正する
| <a href="flowerA2.jpg" rel="lightbox[spring]" title="my caption"><IMG src="flowerA1.jpg" width="160" height="110" border="0"></a> |
| <a href="flowerB2.jpg" rel="lightbox[spring]" title="my caption"><IMG src="flowerB1.jpg"
width="160" height="110" border="0"></a> |
| <a href="flowerC2.jpg" rel="lightbox[spring]" title="my caption"><IMG src="flowerC1.jpg"
width="160" height="110" border="0"></a> |
|
小さい画像flowerA1.jpgをクリックすると、大きい画像flowerA2.jpgが表示されるようになります。また、そのままflowerA2.jpgの端をクリックすると、flowerB2.jpg、flowerC2.jpg・・・・と大きい画像が次々と表示されます。
その様子は、My photo galleryをご覧下さい。 |