スライド表示を行う(Lightbox)

説明

Lightboxを利用するにはprototype.jsライブラリとscript.aculo.usライブラリが必要です。lightbox.jsを読み込ませる前に、この2つを順番に読み込ませておきます。Lightboxでスライド表示させたい画像をタグで囲みrel属性を指定します。rel="lightbox"とした場合は単独での表示になり、rel="lightbox[グループ名]"のようにグループ名を指定した場合は、一連のグループとして表示されます。また、画像のキャプションを表示するにはタグのtitle属性に設定します。
LightboxはHTML文書内に記述されている
タグのrel属性を読み取り自動的に設定するためJavScriptプログラムを記述する必要はありません。
JavaScriptテクニック ブック  詳しい解説などはJavaScriptテクニック ブックを参照してください。

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<link rel="stylesheet" type="text/css" href="lightbox.css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox.js"></script>
</head>
<body>
<h1>スライド表示を行う</h1>
<a href="photo/01.jpg" rel="lightbox[album]" title="木曽の大橋">
<img src="thumb/01.jpg">
</a>
<a href="photo/02.jpg" rel="lightbox[album]" title="諏訪湖花火">
<img src="thumb/02.jpg">
</a>
<a href="photo/03.jpg" rel="lightbox[album]" title="高原">
<img src="thumb/03.jpg">
</a>
</body>
</html>