グループ化して表示する

GreyBoxでは複数の画像をグループとしてスライド表示させることができます。ただし、一定時間ごと自動的に画像が切り替わるわけではなく、クリック操作により前後の画像に切り替わるようになっています。グループ化するには<a>タグのrel属性に「gb_imageset[グループ名]」を指定します。グループ名が同じであれば1セットとしてみなされ処理されます。例えばphotoというグループ名にした場合には以下のようになります(サンプル04)。

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

サンプル04の実行結果

グループ化することにより前後の矢印で制御できる

矢印で

画像のグループを制御

サンプル04

    <!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_imageset[photo]">
                    <img src="thumb/001.jpg" width="96" height="54" alt="富士山">
                </a>
                <a href="photo/002.jpg" title="富山湾" rel="gb_imageset[photo]">
                    <img src="thumb/002.jpg" width="96" height="54" alt="富山湾">
                </a>
                <a href="photo/003.jpg" title="白糸の滝" rel="gb_imageset[photo]">
                    <img src="thumb/003.jpg" width="96" height="54" alt="白糸の滝">
                </a>
        </body>
    </html>

グループ化されている場合は単独で表示する場合と異なり、ウィンドウ上部に[<] [>]のボタン画像が表示され、クリックすると前後の画像が表示されます。GreyBoxで設定できるグループ名の数には制限がないので異なる名前を指定すれば複数のグループとして利用できます(サンプル05)。

サンプル05の実行結果

上下で別のグループに設定してあるので

上下で別の動作になる

サンプル05

    <!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_imageset[photo1]">
                    <img src="thumb/001.jpg" width="96" height="54" alt="富士山">
                </a>
                <a href="photo/002.jpg" title="富山湾" rel="gb_imageset[photo1]">
                    <img src="thumb/002.jpg" width="96" height="54" alt="富山湾">
                </a>
                <a href="photo/003.jpg" title="白糸の滝" rel="gb_imageset[photo1]">
                    <img src="thumb/003.jpg" width="96" height="54" alt="白糸の滝">
                </a>
                <br>
                <a href="photo/004.jpg" title="高原" rel="gb_imageset[photo2]">
                    <img src="thumb/004.jpg" width="96" height="54" alt="高原">
                </a>
                <a href="photo/005.jpg" title="苔" rel="gb_imageset[photo2]">
                    <img src="thumb/005.jpg" width="96" height="54" alt="苔">
                </a>
        </body>
    </html>

最初に説明した単独での表示を行う場合にはグループ名を設定しなければ他のグループと混在して表示させることもできます(サンプル06)。

サンプル06の実行結果

グループ化されたものとグループ化されていないものを混在させることもできる

上段がグループ化されたもので下段がグループ化されていないもの

サンプル06

    <!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_imageset[photo1]">
                    <img src="thumb/001.jpg" width="96" height="54" alt="富士山">
                </a>
                <a href="photo/002.jpg" title="富山湾" rel="gb_imageset[photo1]">
                    <img src="thumb/002.jpg" width="96" height="54" alt="富山湾">
                </a>
                <a href="photo/003.jpg" title="白糸の滝" rel="gb_imageset[photo1]">
                    <img src="thumb/003.jpg" width="96" height="54" alt="白糸の滝">
                </a>
                <br>
                <a href="photo/004.jpg" title="高原" rel="gb_image[]">
                    <img src="thumb/004.jpg" width="96" height="54" alt="高原">
                </a>
                <a href="photo/005.jpg" title="苔" rel="gb_image[]">
                    <img src="thumb/005.jpg" width="96" height="54" alt="苔">
                </a>
        </body>
    </html>