ホームページを作成に関する備忘録

lightboxを使って、大きな写真を見せる

Xhtmlファイルについて

<head>
<link rel="stylesheet" href="../css/lightbox.css" 
  type="text/css" media="screen" />  
<script src="../js/prototype.js" type="text/javascript"></script>  
<script src="../js/scriptaculous.js?load=effects,builder"
 type="text/javascript"></script>  
<script src="../js/lightbox.js" type="text/javascript"></script>  
</head>
〜写真が一つだけの時〜
<a href="photoimage/scan04.jpg" rel="lightbox" title="写真">
<img src="photoimage/scan04_R.jpg" width="160" height="112" alt=""/></a>
〜写真が複数あってグループ化するとき〜
<a href="photoimage/scan04.jpg" rel="lightbox[kouzan]" title="写真1">
<img src="photoimage/scan04_R.jpg" width="160" height="112" alt=""/></a>
<a href="photoimage/scan05.jpg" rel="lightbox[kouzan]" title="写真2">
<img src="photoimage/scan04_R.jpg" width="160" height="112" alt=""/></a>
<a href="photoimage/scan06.jpg" rel="lightbox[kouzan]" title="写真3">
<img src="photoimage/scan04_R.jpg" width="160" height="112" alt=""/></a>
<a href="photoimage/scan07.jpg" rel="lightbox[kouzan]" title="写真4">
<img src="photoimage/scan04_R.jpg" width="160" height="112" alt=""/></a>

ここでは、写真のファイルはxhtmlファイルのあるフォルダにphotoimageフォルダを作り、その中に入れています。また、ligthbox関係のファイルは１つ上の階層にあるcssフォルダ、imagesフォルダ、jsフォルダに入っています。この部分については各自の環境により変更しないといけません。また、titleの部分に説明を入れると、各写真の説明が拡大時に出てきます。

ダウンロード

次のURLから手に入れます。メニューのdownloadを選び、圧縮ファイルをダウンロードします。

JavaScriptが有効ならば別ウインドウ（タグ）で開きます。

http://www.hunddletogether.com/projects/lightbox2

ここから手に入れた圧縮ファイルを解凍すると、cssフォルダとimagesフォルダ、jsフォルダが作成されます。このフォルダ名は変えない方がいいでしょう。そして、これらを左のようにリンクします。このとき、prototype.jsはlightboxに同封されているものでないと不都合が出る場合があります。もしも画像などのフォルダを変えたりする場合は、lightbox.jsの内容を一部変えないといけません。

画像が１枚だけの場合

<a href="photoimage/scan04.jpg" rel="lightbox" title="写真">のようにrelに"lightbox"とします。下の写真をクリックして下さい。

画像が複数あってグループ化するとき

<a href="photoimage/scan04.jpg" rel="lightbox[kouzan]" title="写真">のようにrelに"lightbox[kouzan]"とします。[]の部分はグループ化したい画像はすべて共通にします。これにより、サムネイルをクリックするとlightboxが立ち上がり、大きな画像がエフェクトとともに現れ、画像の右端や左端にマウスカーソルを持って行くと次の画像に行けるようになります。下の写真のどれかをクリックして下さい。