グループ化して表示する

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

    <a href="photo/001.jpg" class="thickbox" rel="nature" title="富士山">
        <img src="thumb/001.jpg" width="96" height="54" alt="富士山">
    </a>
    <a href="photo/002.jpg" class="thickbox" rel="nature" title="夕焼け">
        <img src="thumb/002.jpg" width="96" height="54" alt="夕焼け">
    </a>
    <a href="photo/003.jpg" class="thickbox" rel="nature" title="富山湾">
        <img src="thumb/003.jpg" width="96" height="54" alt="富山湾">
    </a>

サンプル04の実行結果

写真下のNextをクリックすると

画像がスライドする

Prevをクリックすると一つ前に戻る

サンプル04

    <!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="thickbox.css" type="text/css" media="all">
            <script type="text/javascript" src="jquery.js"></script>
            <script type="text/javascript" src="thickbox.js"></script>
            <title>ThickBoxサンプル</title>
        </head>
        <body>
        <h1>ThickBox 3 サンプル</h1>
            <div>
                <a href="photo/001.jpg" class="thickbox" rel="nature" title="富士山">
                    <img src="thumb/001.jpg" width="96" height="54" alt="富士山">
                </a>
                <a href="photo/002.jpg" class="thickbox" rel="nature" title="夕焼け">
                    <img src="thumb/002.jpg" width="96" height="54" alt="夕焼け">
                </a>
                <a href="photo/003.jpg" class="thickbox" rel="nature" title="富山湾">
                    <img src="thumb/003.jpg" width="96" height="54" alt="富山湾">
                </a>
            </div>
        </body>
    </html>

グループ化されている場合は単独で表示する場合と異なり、画像のキャプション下に<Prev、Next>の画像が表示されクリックすると前後の画像が表示されます。ThickBox 3で設定できるグループ名の数には制限がないので異なる名前を指定すれば複数のグループとして利用できます(サンプル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">
            <link rel="stylesheet" href="thickbox.css" type="text/css" media="all">
            <script type="text/javascript" src="jquery.js"></script>
            <script type="text/javascript" src="thickbox.js"></script>
            <title>ThickBoxサンプル</title>
        </head>
        <body>
        <h1>ThickBox 3 サンプル</h1>
            <div>
                <a href="photo/001.jpg" class="thickbox" rel="nature" title="富士山">
                    <img src="thumb/001.jpg" width="96" height="54" alt="富士山">
                </a>
                <a href="photo/002.jpg" class="thickbox" rel="nature" title="夕焼け">
                    <img src="thumb/002.jpg" width="96" height="54" alt="夕焼け">
                </a>
                <a href="photo/003.jpg" class="thickbox" rel="nature" title="富山湾">
                    <img src="thumb/003.jpg" width="96" height="54" alt="富山湾">
                </a>
            </div>
            <div>
                <a href="photo/004.jpg" class="thickbox" rel="photo" title="白糸の滝">
                    <img src="thumb/004.jpg" width="96" height="54" alt="白糸の滝">
                </a>
                <a href="photo/005.jpg" class="thickbox" rel="photo" title="高原">
                    <img src="thumb/005.jpg" width="96" height="54" alt="高原">
                </a>
                <a href="photo/006.jpg" class="thickbox" rel="photo" title="苔">
                    <img src="thumb/006.jpg" width="96" height="54" alt="苔">
                </a>
            </div>
        </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">
            <link rel="stylesheet" href="thickbox.css" type="text/css" media="all">
            <script type="text/javascript" src="jquery.js"></script>
            <script type="text/javascript" src="thickbox.js"></script>
            <title>ThickBoxサンプル</title>
        </head>
        <body>
        <h1>ThickBox 3 サンプル</h1>
            <div>
                <a href="photo/001.jpg" class="thickbox" rel="nature" title="富士山">
                    <img src="thumb/001.jpg" width="96" height="54" alt="富士山">
                </a>
                <a href="photo/002.jpg" class="thickbox" rel="nature" title="夕焼け">
                    <img src="thumb/002.jpg" width="96" height="54" alt="夕焼け">
                </a>
                <a href="photo/003.jpg" class="thickbox" rel="nature" title="富山湾">
                    <img src="thumb/003.jpg" width="96" height="54" alt="富山湾">
                </a>
            </div>
            <div>
                <a href="photo/004.jpg" class="thickbox" title="白糸の滝">
                    <img src="thumb/004.jpg" width="96" height="54" alt="白糸の滝">
                </a>
                <a href="photo/005.jpg" class="thickbox" title="高原">
                    <img src="thumb/005.jpg" width="96" height="54" alt="高原">
                </a>
                <a href="photo/006.jpg" class="thickbox" title="苔">
                    <img src="thumb/006.jpg" width="96" height="54" alt="苔">
                </a>
            </div>
        </body>
    </html>