【ハウツー】ゼロからはじめるThickBox 3 - 画像もHTMLファイルもスイスイ表示 (5) 他のページを表示する | パソコン

急上昇ワード

[

]

【ハウツー】

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

5 他のページを表示する

古籏一浩　 [2007/07/12]

印刷

他のページを表示する

ThickBox 3は画像の表示だけでなく、非同期通信を利用して他のページも読み込んで表示させることができます。ただしその場合、非同期通信の制約の都合上、同じドメイン上にあるファイルしか表示できません。異なるドメイン上にあるファイルの場合はインラインフレーム内に表示させることになります。また、同一ページ内にある領域を抽出して表示させることもできます。

非同期通信を使って他のページを表示する場合には<a>タグにclass="thickbox"を指定します。これは、今まで説明してきた画像の場合と同じです。異なるのは<a>タグのhref属性に指定するURLパラメータです。表示するファイル名の後ろに?を付加し設定パラメータを&で区切って列記します。

パラメータはwidthとheightがあり、それぞれ横幅と縦幅をピクセル値で指定します。サンプル07では以下のように指定しています。

    <a href="page/001.html?width=400&height=200" class="thickbox">～</a>

これはpageフォルダ内にある001.htmlファイルを横幅400ピクセル、縦幅200ピクセルで表示するという意味になります。ここで注意しないといけないのは異なる階層のフォルダにあるHTMLファイルを表示させた場合、画像やリンクのパスの基準がずれてしまうことです。サンプル07ではpageフォルダ内にある画像photo.jpgを表示するようになっています。

サンプル07の構成図


サンプル07の実行結果	別の階層にあるhtmlファイルを表示

サンプル07

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=shift_jis">
            <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="page/001.html?width=400&height=200" class="thickbox">1日目の山</a>
            </div>
        </body>
    </html>

●サンプル07で読み込まれる001.htmlファイルの内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=shift_jis">
            <title>ThickBoxサンプル</title>
        </head>
        <body>
        <h1>日本の山々 (1日目)</h1>
            <p>
                日本は山に囲まれています。ここでは、毎日有名ではない日本の山を紹介していきます。<br>
                <img src="page/photo.jpg" width="256" height="144">
            </p>
        </body>
    </html>

通常、001.htmlファイルからphoto.jpgファイルは同じ階層にあるので

    <img src="photo.jpg" width="256" height="144">

と指定します。しかしこの時、ThickBox 3では画像は表示されません。これは基準となるパスがThickBox 3を実行しているHTMLファイルになるためです。このため、画像を表示させるには以下のようにパスを指定しなければなりません。

    <img src="page/photo.jpg" width="256" height="144">

このようなパスを変更するのが面倒であれば、インラインフレームを利用して表示することができます。インラインフレームとして表示する場合も<a>タグにclass="thickbox"を指定し、href属性に横幅と縦幅をwidth、heightを指定します。そして、インラインフレームで表示することを示すパラメータTB_iframe=trueを付加します。以下のように指定するとpageフォルダ内にある001.htmlファイルをインラインフレームで横幅400ピクセル、縦幅300ピクセルで表示します(サンプル08)。

    <a href="page/001.html?TB_iframe=true&width=400&height=300" class="thickbox">～</a>


サンプル08の実行結果	インラインフレームを用いた実行結果

サンプル08

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=shift_jis">
            <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="page/001.html?TB_iframe=true&width=400&height=300" class="thickbox">1日目の山</a>
            </div>
        </body>
    </html>

異なるURLにあるファイルではなく、同一ページ内の領域を表示させることもできます。この場合も<a>タグにclass="thickbox"を指定し、href属性に横幅と縦幅を示すwidth、heightを指定します。同一ページ内の領域を表示することを示す「inlineId=表示ブロックのID」を指定します。表示するブロックはスタイルシートで非表示にしておいても構いません。これは領域を表示させる際にスタイルシートで内容を表示できるように処理されるためです。サンプル09ではID名page1の<div>タグの領域を表示しています。


サンプル09の実行結果	同一ページ内の表示

サンプル09

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=shift_jis">
            <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="#TB_inline?width=400&height=300&inlineId=page1" class="thickbox">1日目の山</a>
            </div>
            <div id="page1" style="visibility:hidden">
                日本は山に囲まれています。ここでは、毎日有名ではない日本の山を紹介していきます。<br>
                <img src="photo/photo.jpg" width="256" height="144">
            </div>
        </body>
    </html>