【ハウツー】ゼロからはじめるThickBox 3 - 画像もHTMLファイルもスイスイ表示 (6) 角丸で表示する | パソコン

急上昇ワード

[

]

【ハウツー】

ゼロからはじめるThickBox 3 - 画像もHTMLファイルもスイスイ表示

6 角丸で表示する

古籏一浩　 [2007/07/12]

印刷

先頭
前へ
- 1
- 2
- 3
- 4
- 5
- 6
- ／6

角丸で表示する

ThickBox 3では実画像が表示される領域は角が四角になっていますが、Firefoxではスタイルシートを設定することで角丸にすることができます。実画像が表示される領域は1つなので、角丸のスタイルシートである-moz-border-radiusで角丸の半径を以下のように設定します(サンプル10)。

    #TB_window {
        -moz-border-radius:15px;
    }


サンプル10の実行結果	角丸での表示が可能

サンプル10

    <!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>
            <style type="text/css"><!--
            #TB_window {
                -moz-border-radius-topleft:15px;
                -moz-border-radius-topright:15px;
                -moz-border-radius-bottomleft:15px;
                -moz-border-radius-bottomright:15px;
            }
            --></style>
            <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>

角丸の半径を個別に設定することもできます。この場合は以下のように角別にスタイルシートを設定します(サンプル11)。

    #TB_window {
        -moz-border-radius-topleft:8px;
        -moz-border-radius-topright:25px;
        -moz-border-radius-bottomleft:25px;
        -moz-border-radius-bottomright:10px;
    }

サンプル11の実行結果

サンプル11

    <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>
            <style type="text/css"><!--
            #TB_window {
                -moz-border-radius-topleft:8px;
                -moz-border-radius-topright:25px;
                -moz-border-radius-bottomleft:25px;
                -moz-border-radius-bottomright:10px;
            }
            --></style>

            <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>

スタイルシートを工夫すれば画像が表示される領域に背景画像を表示したり半透明にすることもできます(サンプル12)。

サンプル12の実行結果

サンプル12

    <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>
            <style type="text/css"><!--
            #TB_window {
                -moz-border-radius-topleft:8px;
                -moz-border-radius-topright:25px;
                -moz-border-radius-bottomleft:25px;
                -moz-border-radius-bottomright:10px;
                background-image:url(images/bg.gif);
            }
            --></style>

            <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>

ThickBoxは派手なエフェクトはありませが、AjaxライブラリにjQueryを使用しているのであればThickBoxの利用を検討してみてはどうでしょうか。