Movable Type 備忘録

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

  • Oct152006
  • Vote:
    http://bizcaz.com/archives/2006/10/15-181308.php
  • Categories: JavaScript
  • Tags:
  • Social Bookmark

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

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

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

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

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

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

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

Greyboxの使い方

  1. まず、Greyboxをインストールします。
    上記URLから圧縮ファイルをダウンロードしてください。 そして、適当なフォルダに展開してください。

  2. 次にアップロードします。
    アップロード先はどこでも構いませんが、ここではindex.htmlと同じ場所にアップロードするものとして説明します。 greyboxフォルダをまるごと、index.htmlと同じ場所にアップロードしてください。

  3. これで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" />

    追加したら保存して再構築します。

  4. 最後にテンプレートを修正します。
    ボックス表示させたいテンプレート内の<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と同様に、青い字の部分を各自の環境に合わせます。

  5. 最後にボックス表示させたいページのリンクを修正します。
    たとえば、わたしのブログのメールフォームでは以下のようになります。

    1. <a href="<$MTBlogURL$>mailform.php" onclick="return GB_show('MailForm', '<$MTBlogURL$>mailform.php', 600, 600)">Contact</a>

    青い字の部分にはボックス表示させたいページのURLを指定します。

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

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

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

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

では、SEE YOU♪

 Trackback Pings(0)

No trackbacks found.

 Comments(6)

#1: Posted by oscar @ October 18, 2006 [REPLY]
user-pic

こんにちは、bzbellさん。
試させてもらって思ったんですが、フォームの場合には「Close」ボタンが、ポップアップを閉じる動作になってた方が、良さそうですね。
閉じる動作って GB_hide() で良いんですよね。

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

>>1 oscar さん

こんにちわ^^

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

 
#3: Posted by TomoMiX @ March 12, 2008 [REPLY]
user-pic

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

 
#4: Posted by Author Profile Page bzbell @ March 12, 2008 [REPLY]
user-pic

>>3 TomoMiX さん

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

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

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

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

  1. build/js/shadowbox/shadowbox.js 内から「images/」というキーワードを検索して削除します。見たところ 2 箇所あるようです。

  2. 以下のファイルを先ほどと同様に UP します。

    • build/css/shadowbox.css
    • build/js/shadowbox.js（もちろん先ほど修正したファイルを UP です）
    • build/js/adapter/shadowbox-prototype.js
    • images/loading.gif
    • overlay-85.png

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

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

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

 
#5: Posted by Tomomix @ March 21, 2008 [REPLY]
user-pic

bzbellさん
返事おくれてすみません。
shadowboxは、同ページ内のlightboxと衝突する関係もあり
greyboxを実装しました。
bzbellさんの助言のお陰で、着手はじめ、実装に成功しました。

本当に感謝しています。
また、bzbellさんのページデザインがまた格好良くかわって
いたのに驚きです。
ムーバブルタイプは綺麗なブログが作れるのですね。

是非ともリンクさせていただきたくお願いします。
相互リンクは募集されていましたらそちらもお願いしたく
存じます。こちらのページはまだまだランクもない
ページですが。。

 
#6: Posted by Author Profile Page bzbell @ March 21, 2008 [REPLY]
user-pic

>>5 Tomomix さん

こんにちわ^^

> bzbellさんの助言のお陰で、着手はじめ、実装に成功しました。

よかったですね。
自分の思い通りのことができるとうれしいですよねぇワクワク

> 相互リンクは募集されていましたらそちらもお願いしたく存じます。

はい。じゃぁ、リンク集に追加させてもらいますね。
テンプレートのテスト表示中で至らないところ多々ですが、後ほどちゃんと表示させます。

今後ともよろしくお願いしますのもじもじ

 

 Post a Comment

 

コメント用フィード