GreyBoxを使う

それでは実際にGreyBoxを使ってみます。ここでは実画像をphotoフォルダに、サムネール画像をthumbフォルダに入れてあります(下図参照)。

本稿のサンプル実行の構成

GreyBoxは非同期通信とエフェクト処理、スライド処理を行う3つのファイルに分かれています。GreyBoxでは、スクリプトファイルを読み込む前にgreyboxフォルダがあるパス(URL)を指定する必要があります。これは<script>タグ内で変数GBROOTDIRにパスを設定します。

    <script type="text/javascript"><!--
        var GB_ROOT_DIR = "./greybox/";
    // --></script>

greyboxフォルダのパスを指定した後に、実際に処理を行う3つのファイルを以下のように順番に読み込ませます。

    <script type="text/javascript" src="greybox/AJS.js"></script>
    <script type="text/javascript" src="greybox/AJS_fx.js"></script>
    <script type="text/javascript" src="greybox/gb_scripts.js"></script>

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

    <link rel="stylesheet" href="greybox/gb_styles.css" type="text/css" media="all">

これでGreyBoxを利用する準備が完了です。それでは実際のHTMLコードを見ていきます。 GreyBoxではリンクがクリックされると実画像をエフェクト付きで表示します。この設定は以下のように<a>タグのrel属性でgb_image[]の文字を指定します。

    <a href="photo/001.jpg" rel="gb_image[]">～</a>

実画像が表示される際に、ウィンドウの左上部のバーにキャプションが表示されます。このキャプションはtitle属性で指定した文字列が表示されます。以下のようにすると「富士山」のキャプションが表示されます。

    <a href="photo/001.jpg" title="富士山" rel="gb_image[]">～</a>

<a>タグのhref属性で指定されているphoto/001.jpgが実際に表示する実画像になります。以下のようにすると「富士山」の文字をクリックすると実画像であるphoto/001.jpgが表示されます(サンプル01)。

    <a href="photo/001.jpg" title="富士山" rel="gb_image[]">富士山</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">
            <title>Sample</title>
            <link rel="stylesheet" href="greybox/gb_styles.css" type="text/css" media="all">
            <script type="text/javascript"><!--
                var GB_ROOT_DIR = "./greybox/";
            // --></script>
            <script type="text/javascript" src="greybox/AJS.js"></script>
            <script type="text/javascript" src="greybox/AJS_fx.js"></script>
            <script type="text/javascript" src="greybox/gb_scripts.js"></script>
        </head>
        <body>
            <h1>GreyBox サンプル</h1>
                <a href="photo/001.jpg" title="富士山" rel="gb_image[]">富士山</a>
        </body>
    </html>

文字ではなくサムネール画像を表示させる方が見た目にも綺麗です。この場合は以下のように<img>タグでサムネール画像を表示するようにします。サムネール画像はthumb/001.jpgになります。(サンプル02)

    <a href="photo/001.jpg" title="富士山" rel="gb_image[]">
        <img src="thumb/001.jpg" width="96" height="54" alt="富士山">
    </a>

サンプル02の実行結果

サムネール画像をクリックすると同様に表示される

サンプル02

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <title>Sample</title>
            <link rel="stylesheet" href="greybox/gb_styles.css" type="text/css" media="all">
            <script type="text/javascript"><!--
                var GB_ROOT_DIR = "./greybox/";
            // --></script>
            <script type="text/javascript" src="greybox/AJS.js"></script>
            <script type="text/javascript" src="greybox/AJS_fx.js"></script>
            <script type="text/javascript" src="greybox/gb_scripts.js"></script>
        </head>
        <body>
            <h1>GreyBox サンプル</h1>
                <a href="photo/001.jpg" title="富士山" rel="gb_image[]">
                    <img src="thumb/001.jpg" width="96" height="54" alt="富士山">
                </a>
        </body>
    </html>

1つではなく複数の写真を表示させる場合には以下のように<a>タグを列記するだけです。特に新しく何か記述したり設定する必要はありません。

    <a href="photo/001.jpg" title="富士山" rel="gb_image[]">
        <img src="thumb/001.jpg" width="96" height="54" alt="富士山">
    </a>
    <a href="photo/002.jpg" title="富山湾" rel="gb_image[]">
        <img src="thumb/002.jpg" width="96" height="54" alt="富山湾">
    </a>
    <a href="photo/003.jpg" title="白糸の滝" rel="gb_image[]">
        <img src="thumb/003.jpg" width="96" height="54" alt="白糸の滝">
    </a>

サンプル03の実行結果

複数のサムネールを並べても同様にボックス表示ができる

サンプル03

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
<head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <title>Sample</title>
            <link rel="stylesheet" href="greybox/gb_styles.css" type="text/css" media="all">
            <script type="text/javascript"><!--
                var GB_ROOT_DIR = "./greybox/";
            // --></script>
            <script type="text/javascript" src="greybox/AJS.js"></script>
            <script type="text/javascript" src="greybox/AJS_fx.js"></script>
            <script type="text/javascript" src="greybox/gb_scripts.js"></script>
        </head>
        <body>
            <h1>GreyBox サンプル</h1>
                <a href="photo/001.jpg" title="富士山" rel="gb_image[]">
                    <img src="thumb/001.jpg" width="96" height="54" alt="富士山">
                </a>
                <a href="photo/002.jpg" title="富山湾" rel="gb_image[]">
                    <img src="thumb/002.jpg" width="96" height="54" alt="富山湾">
                </a>
                <a href="photo/003.jpg" title="白糸の滝" rel="gb_image[]">
                    <img src="thumb/003.jpg" width="96" height="54" alt="白糸の滝">
                </a>
        </body>
     </html>