自前でエフェクト処理などを記述しても可能ですが、以下のURLにあるLightbox JSライブラリを利用すると格好いいスライドショーなどが簡単にできます。
http://www.huddletogether.com/projects/lightbox2/
Lightbox JSライブラリの使い方は非常に簡単です。まず、スタイルシートファイルlightbox.cssをリンクします。
<link href="css/lightbox.css" rel="stylesheet" type="text/css">
また、imagesフォルダにある画像も忘れずにHTMLファイルと同じ階層のディレクトリに入れておきます。
次にprototype.js、acript.aculo.us、lightbox.jsをリンクします。script.aculo.usのeffects.jsファイルが必要なので、これもscript.aculo.usファイルと同じディレクトリに入れておきます。
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
これで準備完了です。あとはHTMLだけ記述すればできあがりです。というのもLightbox JSライブラリではaタグのrel属性がlightboxかどうかで処理を決めているためです。rel="lightbox"としておけばクリックされた時点で自動的にスライド表示処理が始まります。
以下のサンプルはサムネールがクリックされたら一枚だけ画面に表示するものです。rel="lightbox"を記述するだけですので、特に説明は不要でしょう。（実際の
サンプルを実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Lightbox JS サンプル</title>
<link href="css/default.css" rel="stylesheet" type="text/css">
<link href="css/lightbox.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</head>
<body>
<h1>Lightbox JS Sample</h1>
<a href="photo/0005.jpg"
rel="lightbox"><img src="thumbnail/0005.jpg"></a>
<a href="photo/0046.jpg"
rel="lightbox"><img src="thumbnail/0046.jpg"></a>
<a href="photo/0058.jpg"
rel="lightbox"><img src="thumbnail/0058.jpg"></a>
<a href="photo/0065.jpg"
rel="lightbox"><img src="thumbnail/0065.jpg"></a>
<a href="photo/0076.jpg"
rel="lightbox"><img src="thumbnail/0076.jpg"></a>
</body>
</html>
上記のサンプルでは写真は表示されますが、次の写真を表示するにはCLOSEボタンをクリックしてから見たい写真をクリックしなければなりません。できれば写真をクリックしたら次の写真に自動的に移動して欲しいところです。Lightbox JSではaタグのrel属性で[]内に文字を記述することでスライドショーを行う１つのグループとして処理することができます。つまりrel="lightbox[flower]"とすると、この属性値が記述されたものに関しては、まとめてスライドのようにできる、ということです。同じページにrel="lightbox[abc]"とrel="lightbox[def]"があれば、それぞれ別のスライドショーグループとして処理されます。このため、スクリプトで何か処理する必要がなく非常に手軽です。次の写真を表示するにはマウスを写真の上にもっていきます。写真の右側をクリックすると次の写真に、左側をクリックすると前の写真に移動します。
以下のサンプルは、写真をまとめて１つのスライドとして処理するものです。（実際のサンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Lightbox JS サンプル 2</title>
<link href="css/default.css" rel="stylesheet" type="text/css">
<link href="css/lightbox.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</head>
<body>
<h1>Lightbox JS Sample 2</h1>
<a href="photo/0005.jpg" rel="
lightbox[flower]"><img src="thumbnail/0005.jpg"></a>
<a href="photo/0046.jpg" rel="
lightbox[flower]"><img src="thumbnail/0046.jpg"></a>
<a href="photo/0058.jpg" rel="
lightbox[flower]"><img src="thumbnail/0058.jpg"></a>
<a href="photo/0065.jpg" rel="
lightbox[flower]"><img src="thumbnail/0065.jpg"></a>
<a href="photo/0076.jpg" rel="
lightbox[flower]"><img src="thumbnail/0076.jpg"></a>
</body>
</html>
Lightbox JSでは、それぞれの写真にキャプションを付けることもできます。キャプションはaタグのtitle属性に記述します。Operaではtitle属性値が記述されていない場合にnullの文字が表示されてしまうことがあるので特にキャプションを付けたくない場合でもtitle=""として何か指定しておくのが安全です。以下のサンプルでは、それぞれの写真にキャプションを付けて表示させています。（実際のサンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Lightbox JS サンプル 3</title>
<link href="css/default.css" rel="stylesheet" type="text/css">
<link href="css/lightbox.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</head>
<body>
<h1>Lightbox JS Sample 3</h1>
<a href="photo/0005.jpg" rel="lightbox[flower]"
title="二輪草"><img src="thumbnail/0005.jpg"></a>
<a href="photo/0046.jpg" rel="lightbox[flower]"
title="水芭蕉"><img src="thumbnail/0046.jpg"></a>
<a href="photo/0058.jpg" rel="lightbox[flower]"
title="たんぽぽ"><img src="thumbnail/0058.jpg"></a>
<a href="photo/0065.jpg" rel="lightbox[flower]"
title="山吹草"><img src="thumbnail/0065.jpg"></a>
<a href="photo/0076.jpg" rel="lightbox[flower]"
title="しだれ桜"><img src="thumbnail/0076.jpg"></a>
</body>
</html>
[
目次へ]
(2006.5.14)