概要 †

lightwindowのoptionsを変更したいと思ったことはないですか?

例えば、

ウィンドウが出てくる速度が遅いのでもっと早くしたいとか、
ローディングアイコンがダサいので変更したいとか、
images/ajax-loading.gifと決め打ちしているがそれは困るとか、
lightwindow表示中はFlashを非表示にしたいとか、

lightwindow本体のライセンスは MIT License なので改変可能ですが、

ソースコード本体を変更するのはなるべくなら避けたいところです。

lightwindow本体をいじることなく、オプションで設定変更できるようにする方法を書きます。

↑

[edit]

lightwindowについて †

lightwindow自体の解説はたくさんあるので省きます。

↓この辺を参照されるとよいかと思います。

ゼロからはじめるLightWindow 2.0 - Flashムービーも表示できるAjaxライブラリ

http://journal.mycom.co.jp/articles/2007/10/02/lw/menu.html

公式サイトは↓こちらです。

LightWindow v2.0

http://www.stickmanlabs.com/lightwindow/

↑

[edit]

lightwindow.js のオプション設定 †

lightwindow.js本体のオプション設定は下記のようになっています。

    //
    //    Initialize the lightwindow.
    //
    initialize : function(options) {
        this.options = Object.extend({
            resizeSpeed : 8,
            contentOffset : {
                height : 20,
                width : 20
            },
    (略)

この呼び出しは、同じくlightwindow.js本体の最後で

下記のように定義されています。

Event.observe(window, 'load', lightwindowInit, false);

//
// Set up all of our links
//
var myLightWindow = null;
function lightwindowInit() {
    myLightWindow = new lightwindow();
}

onLoadでlightwindowInitを実行するようにされています。

この部分を変更できればよいわけです。

↑

[edit]

自分で定義したlightwindowInitに差し替える †

まずは、lightwindow.jsを呼び出すHTML側に、

下記のように記述しておきます。

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightwindow.js"></script>
<link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />
<script type="text/javascript">
// オプションを記述してlightwindowを生成する
function myLightwindowInit() {
    var options = { resizeSpeed : 10,     // リサイズ速度を早めに
                    overlay: {            // 透過部分の画像パスを変更
                        opacity : 0.7,
                        image : 'design/images/black.png',
                        presetImage : 'design/images/black-70.png'
                    }
                };
    myLightWindow = new lightwindow(options);
}
</script>

これだけだと、js/lightwindow.js を呼び出したときの

Event.observe(window, 'load', lightwindowInit, false); が実行されて、自分で定義したlightwindowInitが呼ばれません。

呼ぶようにしましょう。

// lightwindow.jsを<script>タグで読み込んだ時に自動的にonLoadに登録されたイベントを解除
Event.stopObserving(window, 'load', lightwindowInit, false);

// 代わりに次で定義するmyLightwindowInitを実行させる
Event.observe(window, 'load', myLightwindowInit, false);
</script>

これでOKです。

↑

[edit]