Movable Type 備忘録

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

Aug012007
Author: bzbell
Categories: Customize
Tags: Customize, JavaScript, prototype

Next Page: リンクテキストをロールオーバする（scrollover.js）
Prev Page: jQueryでページ分割

こんばんわ^^

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

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

カスタマイズ

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

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

まず、必要な JavaScript をサーバにアップロードします。
以下のサイトから圧縮ファイル(lightbox.zip)を入手して、サーバにアップロードしてください。
Particletree » Lightbox Gone Wild!
次に透過レイヤーの色を変更します。
各自のお好みで変更してください。
css/lightbox.css
1. #overlay{
2. display:none;
3. position:absolute;
4. top:0;
5. left:0;
6. width:100%;
7. height:100%;
8. z-index:5000;
9. background-color:#000;
10. -moz-opacity: 0.8;
11. opacity:.80;
12. filter: alpha(opacity=80);
13. }
赤い字の部分をお好みの背景色で変更することで、いろんな色の透過レイヤーを表示することができます。
次に、JavaScript を変更します。
わたしのサイトでは、Ajax のリクエスト時に 'POST' では正しく動作できなかったので、'GET' に変更しました。
あと、JavaScript の文法的に Valid にしてみました。

変更点が多いので、以下のリンクページから参考にしてください。
overlay.js: 3.6KB
overlay-unpack.js: 5.9KB
最後に使い方を説明します。
基本的には通常のリンクタグに、'lbOn' クラスを追加するだけみたいです。
XHTML
1. <a href="http://表示したい外部ファイルのURL" class="lbOn">リンクテキスト</a>
青い字の部分に、透過レイヤーで表示させたい外部ファイルの URL を指定します。
赤い字の部分は必須です。必ず付加してください。