Lightboxのように透過レイヤー表示してみる

• Aug012007
• Vote:
  http://bizcaz.com/archives/2007/08/01-001853.php
• Categories: prototype
• Tags: prototype
• Social Bookmark

• Prev Page: prototypeで記事内容をアコーディオンのように表示する（Accordion.js）
• Next Page: Prototype でプログレスバーの表示 (jsProgressBarHandler.js)

こんばんわ^^

今日はメッチャ眠いのでタンタンと説明していきます。

タイトルにもあるように、Lightboxの背景が透過レイヤーで見映えよくイメージ表示されますね。
あれを実装する JavaScript がyoumosさんのところで紹介されてましたので、眠いの我慢して TRY してみました (;￣∇￣A はは
Lightboxのような透過レイヤー表示の実装サンプル （Lightbox Effect）

カスタマイズ

今回は PNG 画像を使用しないで、opacity による透過処理で透過レイヤーをやってみました。
サンプル

Ajax による外部ファイルの読込み & 表示が基本のようです。
たとえば、メールフォームを表示したりなどに使ってもいいかも、です (￣∇￣)b
また、prototype.js を併用してます。

1. まず、必要な JavaScript をサーバにアップロードします。
   以下のサイトから圧縮ファイル(lightbox.zip)を入手して、サーバにアップロードしてください。

   Particletree » Lightbox Gone Wild!

2. 次に透過レイヤーの色を変更します。
   各自のお好みで変更してください。

   css/lightbox.css

   37. #overlay{
   38.     display:none;
   39.     position:absolute;
   40.     top:0;
   41.     left:0;
   42.     width:100%;
   43.     height:100%;
   44.     z-index:5000;
   45.     background-color:#000;
   46.     -moz-opacity: 0.8;
   47.     opacity:.80;
   48.     filter: alpha(opacity=80);
   49. }

   赤い字の部分をお好みの背景色で変更することで、いろんな色の透過レイヤーを表示することができます。

3. 次に、JavaScript を変更します。
   わたしのサイトでは、Ajax のリクエスト時に 'POST' では正しく動作できなかったので、'GET' に変更しました。
   あと、JavaScript の文法的に Valid にしてみました。

   変更点が多いので、以下のリンクページから参考にしてください。
   overlay.js: 3.6KB
   overlay-unpack.js: 5.9KB

4. 最後に使い方を説明します。
   基本的には通常のリンクタグに、'lbOn' クラスを追加するだけみたいです。

   XHTML

   1. <a href="http://表示したい外部ファイルのURL" class="lbOn">リンクテキスト</a>

   青い字の部分に、透過レイヤーで表示させたい外部ファイルの URL を指定します。
   赤い字の部分は必須です。必ず付加してください。

以上で、任意の外部ファイルを透過レイヤーで表示させることができました。
使い勝手も良さそうですの (￣∇￣)b

ざっくりな説明ですいません。
ホント眠くて･･･でも、せっかく TRY したんだから HOT なうちに投稿したかったので (;￣∇￣A

では、おやすみなさい♪

• Related Entries
• 09/03/20アクセスランキング・プラグイン（prototype.pagerank.js）
• 09/02/08prototype で Five Star Rating( Starbox )２
• 08/08/10The AJAX Libraries API
• 08/08/03Ajax でアンケートフォーム表示 - 同一ページ内に複数アンケート対応
• 08/08/02Ajax でアンケートフォーム表示 - 期限付き機能追加
• 08/07/31Ajax でアンケートフォーム表示 - 不具合対応
• 08/07/30Ajax でアンケートフォーム表示
• 08/02/22Ajaxでアクセス・ランキングを表示する６
• 08/02/16Ajaxでアクセス・ランキングを表示する５
• 08/02/16protopacked_v2.18（prototype）

• Edit
• Permalink
• 2 Comments
• No TrackBacks