WebDesigning 7月号掲載のサンプルです。Lightboxライブラリ（＆prototype.jsライブラリ）を利用して格好良く画像をページ上に表示するものです。掲載されているものとは若干内容（ここに掲載している最初のサンプルは誌面では未掲載（もともと説明用のため））が異なります。
【サンプルを実行する】
<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>
【サンプルを実行する】
<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>
【サンプルを実行する】
<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>
<script type="text/javascript"><!--
window.onload = function ()
{
var url = "getfilelist.cgi?cache="+(new Date()).getTime();
new Ajax.Request(url, { method: "get", onComplete:printTag });
}
function printTag(httpObj)
{
var LF = String.fromCharCode(10);
var list = httpObj.responseText.split(LF);
var result = "";
for (var i=0; i<list.length-1; i++)
{
result += '<a href="photo/'+list[i]+'" rel="lightbox[flower]" title=""><img src="thumbnail/'+list[i]+'"></a>';
}
$("slide").innerHTML = result;
initLightbox();
}
// --></script>
</head>
<body>
<h1>Lightbox JS Sample 3</h1>
<div id="slide"></div>
</body>
</html>
【getfilelist.cgi （Ruby）】
#!/usr/local/bin/ruby
require "cgi"
print "Content-type: text/plain\n\n"
fh = open("| cd photo;ls")
while !fh.eof
print fh.gets
end
fh.close
【getfilelist.cgi （Perl）】
#!/usr/bin/perl
use CGI;
print "Content-type: text/plain\n\n";
open(FH,"| cd photo;ls");
while (<FH>) {
print $_;
}
close(FH);