プログラムで制御する

LightWindow 2.0はプログラムから、ある程度制御することができます。まず、後からリンクにLightWindowで表示されるようにしてみましょう。後付けで設定するにはmyLightWindow.createWindow("リンクのID名")とします。リンクのID名は<a>タグに指定したものになります。 myLightWindowオブジェクトはLightWindow 2.0ライブラリが読み込まれると自動的に作成されるオブジェクトです。このオブジェクトにより表示処理などが行われます。myLightWindowではなく独自のオブジェクトを生成したい場合には以下のようにします。

LW_Obj = new lightwindow();

これでLW_Objオブジェクトが生成されます。サンプル16はページが読み込まれた後にリンクにLightWindowで表示されるように指定しています。

サンプル16の実行結果

ページが読み込まれた後にオブジェクトを作成している

サンプル16

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>LightWindowサンプル</title>
        <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>
        <script type="text/javascript"><!--
            window.onload = function(){
                myLightWindow.createWindow("Fuji");
            }
        // --></script>
    </head>
    <body>
    <h1>LightWindowサンプル</h1>
        <div>
            <a href="photo/001.jpg" id="Fuji" title="富士山">
                <img src="thumb/001.jpg" width="96" height="54" alt="富士山">
            </a>
        </div>
    </body>
</html>

ユーザーによる操作でページ上に表示させるのではなく、自動的に表示させるにはmyLightWindow.activateWindow()を使います。パラメータには表示に必要なオプションを列記します。パラメータは{名前:値}の形式で指定し、複数ある場合には,(カンマ)で区切って列記します。指定できるパラメータは以下の表になります。サンプル17ではボタンがクリックされたら画像をページ内に表示しています(サンプル17)。

サンプル17の実行結果

各種パラメータが設置されている。

myLightWindow.activateWindow()のパラメータ

href 表示するデータのURL
title タイトル
author 制作者
caption キャプション
rel rel属性で指定するものと同じカテゴリ/グループ名
top Y座標
left X座標
type 種類
showImages 一度の表示する枚数
height 縦幅
width 横幅
loadingAnimation 読み込みアニメーションの表示フラグ
iframeEmbed インラインフレームにするかのフラグ
form フォーム名

サンプル17

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>LightWindowサンプル</title>
        <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>
        <script type="text/javascript"><!--
            window.onload = function(){
                $("dispButton").onclick = function(){
                    myLightWindow.activateWindow({
                        href : "photo/001.jpg",
                        title : "富士山",
                        author : "OpenSpace",
                        caption : "晴天の富士",
                        top : 200,
                        left : 300
                    });
                }
            }
        // --></script>
    </head>
    <body>
    <h1>LightWindowサンプル</h1>
        <form>
            <input type="button" value="表示する" id="dispButton">
        </form>
    </body>
</html>