Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

ページをGreyboxでボックス表示してみる

Oct152006
Author: bzbell
Categories: JavaScript
Tags: JavaScript
Social Bookmark

Prev Page: reflection.js
Next Page: コメントフォームに吹き出しメッセージを表示する

以前、サムネイルをLightbox JSで表示してみるを紹介したましたが、Lightboxはイメージファイルをボックス表示するものでした。

今回はページごとボックス表示するカスタマイズを紹介します。

まずはサンプル。
わたしのブログでは、メールフォームをボックス表示させてみました。ページ右上にある"Contact"をクリックしてみてください。

イメージはつかめたでしょうか。
ブラウザで以下のURLを表示すると、メールフォームの本来のページが確認できます。

メールフォーム

このようにページまるごとボックス表示させるには、Greyboxを使用すればカンタンにできます。

このカスタマイズは、MovableType(ムーバブルタイプ)に限らず使用できます。

▼Greyboxの入手はこちらから▼
http://orangoo.com/labs/?page_id=54

Greyboxの使い方

まず、Greyboxをインストールします。
上記URLから圧縮ファイルをダウンロードしてください。そして、適当なフォルダに展開してください。
次にアップロードします。
アップロード先はどこでも構いませんが、ここではindex.htmlと同じ場所にアップロードするものとして説明します。 greyboxフォルダをまるごと、index.htmlと同じ場所にアップロードしてください。
これでGreybox設置は完了です。今度はスタイルシートの修正を行います。

わたしは、既存のスタイルシートstyles-site.cssの中にgreybox/greybox.cssをインポートするよう、以下のように追加しました。
1. @import url(<$MTBlogURL$>greybox/greybox.css);
青い字の部分を各自の環境に合わせて修正することになります。
また、各テンプレート内に個別に追加する場合は、以下の1行を<head>～</head>の間に追加します。
1. <link rel="stylesheet" href="<$MTBlogURL$>greybox/greybox.css" />
追加したら保存して再構築します。
最後にテンプレートを修正します。
ボックス表示させたいテンプレート内の<head>～</head>の間に以下のコードを追加します。
1. <script type="text/javascript" src="<$MTBlogURL$>greybox/AJS.js"></script>
2. <script type="text/javascript" src="<$MTBlogURL$>greybox/greybox.js"></script>
3. <script type="text/javascript">
4. var GB_IMG_DIR = "<$MTBlogURL$>greybox/";
5. GreyBox.preloadGreyBoxImages();
6. </script>
CSSと同様に、青い字の部分を各自の環境に合わせます。
最後にボックス表示させたいページのリンクを修正します。
たとえば、わたしのブログのメールフォームでは以下のようになります。
1. <a href="<$MTBlogURL$>mailform.php" onclick="return GB_show('MailForm', '<$MTBlogURL$>mailform.php', 600, 600)">Contact</a>
青い字の部分にはボックス表示させたいページのURLを指定します。

赤い字の部分はタイトル名です。
そして、緑の字の部分はボックスサイズを指定します。

修正したら保存して再構築してください。

以上で、ページをボックス表示させることができました。
ページ移動しなくて済むので使いやすくなったと思います。

以前、Googleなどの検索サイトをGreyboxを使って表示させてましたが、ブラウザで表示できるページなら何でもボックス表示できるのではないでしょうか。

では、SEE YOU♪

Edit
Permalink
Comments(6)
Trackbacks(0)

Trackback Pings(0)

TrackBack URL for this entry:

No trackbacks found.

Comments(6)

#1: Posted by oscar @ October 18, 2006 [REPLY]: こんにちは、bzbellさん。
試させてもらって思ったんですが、フォームの場合には「Close」ボタンが、ポップアップを閉じる動作になってた方が、良さそうですね。
閉じる動作って GB_hide() で良いんですよね。

#2: Posted by bzbell @ October 18, 2006 [REPLY]

>>1 oscar さん

こんにちわ^^

アドバイスありがとうございます(￣∇￣)/
さっそくやってみます♪

#3: Posted by TomoMiX @ March 12, 2008 [REPLY]: はじめまして。
自分もGreyboxに興味を持っており、実装しようかと思っています。
Lightboxよりも手順が簡単で即できるかと思ったら・・・
当方、FC2Blogを利用しており、手順途中にフォルダパスを指定する
記述があります。
FC2Blogは、ファイルのみでフォルダアップロードが無いので、
実装はムリなのでしょうか。また、できるとしてもかなりの工数と
知識が必要となりますでしょうか。
なにかヒントなどありましたらご教授願いたくコメントいたしました。

#4: Posted by bzbell @ March 12, 2008 [REPLY]

>>3 TomoMiX さん

> FC2Blogは、ファイルのみでフォルダアップロードが無いので、実装はムリなのでしょうか。

ファイルのみでも大丈夫だと思います。
基本的には greybox/ フォルダの中ファイルのみ UP すればいいと思います。
やむを得ませんが http://blackcat13numbers.blog31.fc2.com/ 直下に置くなど。

で、記事中にもあるようにイメージファイルの場所（URL）を指定してあげればよいと思います

でも、TomoMiX さんのブログでもご紹介されてるように、わたし個人的には shadowbox の方がオススメです

build/js/shadowbox/shadowbox.js 内から「images/」というキーワードを検索して削除します。見たところ 2 箇所あるようです。
以下のファイルを先ほどと同様に UP します。
- build/css/shadowbox.css
- build/js/shadowbox.js（もちろん先ほど修正したファイルを UP です）
- build/js/adapter/shadowbox-prototype.js
- images/loading.gif
- overlay-85.png

そして、以下のコードをテンプレート中に埋め込みます。

<script type="text/javascript">
Event.observe(window, "load", function() {
var options = {
assetURL: 'http://blackcat13numbers.blog31.fc2.com/'
};
Shadowbox.init(options);
});
</script>

以上で FC2 上でも shadowbox が使えるかと思います。
確認はしてませんのでご確認ください