LightWindow 2.0を使う

それでは実際にLightWindow 2.0を使ってみます。ここでは実画像をphotoフォルダ、サムネール画像をthumbフォルダ、スタイルシートファイルはcssフォルダ、スクリプトファイルはjsフォルダに入れてあります。

本稿の構成

LightWindow 2.0は非同期通信などの処理にprototype.jsライブラリ、エフェクト処理にscriptaculousライブラリを使用しています。これらのライブラリはLightWindow 2.0をダウンロードすると一式で入っていますので新たにダウンロードする必要はありません。LightWindow 2.0を使用する前には、これら2つのライブラリを読み込ませる必要があります。読み込ませる時には必ず最初にprototype.jsライブラリ、次にscriptaculousライブラリの順番で読み込ませます。

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>

これら2つのライブラリを読み込ませたらLightWindow 2.0のスクリプトを読み込ませます。

<script type="text/javascript" src="js/lightwindow.js"></script>

LightWindow 2.0を使う場合にはスタイルシートファイルも読み込ませる必要があります。このファイルはlightwindow.cssで以下のようにして読み込ませます。

<link rel="stylesheet" href="css/lightbox.css" type="text/css">

これでLightWindow 2.0を利用する準備が完了です。次にHTMLタグを設定します。LightWindow 2.0ではリンクがクリックされると実画像をエフェクト付きで表示します。この設定は以下のように<a>タグのclass属性でlightwindowの文字を指定するだけです。

<a href="photo/001.jpg" class="lightwindow">～</a>

photo/001.jpgが実際に表示する実画像になります。以下のようにすると「富士山を表示」の文字をクリックすると実画像であるphoto/001.jpgが表示されます(サンプル01)。

<a href="photo/001.jpg" class="lightwindow" title="富士山">富士山を表示</a>

サンプル01の実行結果

文字をクリックすると画像が表示される

サンプル01

<!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="富士山">富士山を表示</a>
        </div>
    </body>
</html>