【ハウツー】

ゼロからはじめるGreyBox - 一歩先行くウィンドウ表示

1 GreyBoxとは?

    古籏一浩  [2007/07/20]

    GreyBoxとは?

    GreyBoxはAjax(非同期通信処理)を利用して画像やページを表示するライブラリです。ブログや自分のWebサイトで少し変わったテイストの画像表示やリンク先のWebページをボックスで表示するといった使い方ができます。似たようなライブラリにはThickBox(*1)があります。GreyBoxはprototype.js、jQueryなどのライブラリを必要としません。これらのライブラリが使用できない状況では便利です。GreyBoxは<a>タグのrel属性に必要なパラメータを記述するだけでスライド表示やページ表示の処理を行えます。

    GreyBoxはこのURLにあるページからダウンロードできます(*2)。

    GreyBox公式サイト

    「Download GreyBox [v5.50]」のリンクをクリックするとGreyBoxで必要なファイル一式がダウンロードされます。

    Download GreyBox [v5.50]をクリックする

    ダウンロードされたファイルはZIP形式で圧縮されているので解凍します。解凍すると以下の図のように展開されます。

    解凍後の展開図

    いろいろなファイルやフォルダがありますが、必要なのはgreyboxフォルダです。greyboxフォルダ内に必要なプログラムファイルや画像データが入っています。使用するときは、このフォルダごとコピーして利用します。このgreyboxフォルダ内のファイルは他のフォルダに移動させないでください。プログラムが正しく動作しなくなります。

    *1 ThickBoxはjQueryライブラリを利用したスライド処理ライブラリで以下のURLからダウンロードできます。 http://jquery.com/demo/thickbox/
    *2 2007年6月現在のバージョンは5.50です。ここでは、バージョン5.50を使用したサンプルを使って解説しています。また、現在のバージョン5.50ではWindows版Internet ExplorerでHTML 4.0 Transitionalを指定した場合、クローズボタンの画像がウィンドウ右端に偏ってしまいクリックしにくくなります。HTML 4.0 Strict(標準モード)であれば問題なく表示されるので、GreyBoxを使用する際はなるべくHTML 4.0 Strict(標準モード)でページを作成するようにしてください。

    新着記事

    特設サイトの情報

      人気記事

      一覧

        新着記事

        特別企画

        マイナビニュースマガジン