JavaScript/lightwindow.jsのoptionsの設定方法 http://www.ark-web.jp/sandbox/wiki/4304.html

JavaScript/lightwindow.jsのoptionsの設定方法
[edit]

概要

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

例えば、

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

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

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

[edit]

lightwindowについて

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]

サンプル

下記リンクから、上記のデモが見られます。

投稿者竹村 | パーマリンク

| append.gif

tag: JavaScript, lightwindow?


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2009-04-30 (木) 12:20:29 (3819d)

アークウェブのサービスやソリューションはこちら