オプションを指定する
LightWindow 2.0では多くの表示オプションが用意されています。LightWindow 2.0のパラメータ指定は<a>タグのparam属性にオプション名と値を指定します。LightWindow 2.0ではウィンドウ内に表示される画像のサイズを指定することができます。横幅はlightwindow_width、縦幅はlightwindow_heightで指定します。指定する値の単位はピクセルになります。サンプル09のように指定すると横幅768ピクセル、縦幅432ピクセルで表示します。ただし、表示するウィンドウサイズが指定サイズに収まりきらない場合には縮小して表示されます(サンプル09)。
<a href="photo/001.jpg" class="lightwindow" title="富士山" params="lightwindow_width=768,lightwindow_height=432">
 |
 |
サンプル09の実行結果 |
オプションによるサイズ指定 |
サンプル09
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="css/lightwindow.css" type="text/css">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightwindow.js"></script>
<title>LightWindowサンプル</title>
</head>
<body>
<h1>LightWindowサンプル</h1>
<div>
<a href="photo/001.jpg" class="lightwindow" title="富士山" params="lightwindow_width=768,lightwindow_height=432">
<img src="thumb/001.jpg" width="96" height="54" alt="富士山">
</a>
</div>
</body>
</html>
デフォルトでは表示される画像などはブラウザウィンドウの中央に表示されます。表示される画像などの位置を指定することもできます。ただし、画像の位置は表示する内容とキャプション全体を含む領域の中心座標を指定します。X座標はlightwindow_left、Y座標はlightwindow_topで指定することができます。サンプル10では以下のように表示される内容の中心座標を(300,150)にして表示します(サンプル10)。
<a href="photo/001.jpg" class="lightwindow" title="富士山" params="lightwindow_top=150,lightwindow_left=300">
 |
 |
サンプル10の実行結果 |
座標の位置をオプション指定している |
サンプル10
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="css/lightwindow.css" type="text/css">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightwindow.js"></script>
<title>LightWindowサンプル</title>
</head>
<body>
<h1>LightWindowサンプル</h1>
<div>
<a href="photo/001.jpg" class="lightwindow" title="富士山" params="lightwindow_top=150,lightwindow_left=300">
<img src="thumb/001.jpg" width="96" height="54" alt="富士山">
</a>
</div>
</body>
</html>
多くのスライド画像表示ライブラリは一度に一枚しか表示することができませんが、LightWindow 2.0ではlightwindow_show_imagesオプションで一度に表示する画像の枚数を指定することができます。このオプションを利用する場合、class属性にはlightwindow page-optionsを指定する必要があります(サンプル11)。
 |
 |
サンプル11の実行結果 |
複数枚画像でのスライドショー |
サンプル11
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="css/lightwindow.css" type="text/css">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightwindow.js"></script>
<title>LightWindowサンプル</title>
</head>
<body>
<h1>LightWindowサンプル</h1>
<div>
<a href="photo/001.jpg" class="lightwindow page-options" rel="[00]" title="富士山" params="lightwindow_show_images=4">
<img src="thumb/001.jpg" width="96" height="54" alt="富士山">
</a>
<a href="photo/002.jpg" class="lightwindow page-options" rel="[00]" title="夕焼け" params="lightwindow_show_images=2">
<img src="thumb/002.jpg" width="96" height="54" alt="夕焼け">
</a>
<a href="photo/003.jpg" class="lightwindow page-options" rel="[00]" title="富山湾" params="lightwindow_show_images=2">
<img src="thumb/003.jpg" width="96" height="54" alt="富山湾">
</a>
<a href="photo/004.jpg" class="lightwindow page-options" rel="[00]" title="白糸の滝" params="lightwindow_show_images=2">
<img src="thumb/004.jpg" width="96" height="54" alt="白糸の滝">
</a>
</div>
</body>
</html>
