#pgid
** 概要 [#p14ae5b9]
lightwindowのoptionsを変更したいと思ったことはないですか?
例えば、
- ウィンドウが出てくる速度が遅いのでもっと早くしたいとか、
- ローディングアイコンがダサいので変更したいとか、
- images/ajax-loading.gifと決め打ちしているがそれは困るとか、
- lightwindow表示中はFlashを非表示にしたいとか、
lightwindow本体のライセンスは MIT License なので改変可能ですが、~
ソースコード本体を変更するのはなるべくなら避けたいところです。
lightwindow本体をいじることなく、オプションで設定変更できるようにする方法を書きます。
#blikimore
** lightwindowについて [#ac12196a]
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/
** lightwindow.js のオプション設定 [#k5556dde]
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を実行するようにされています。
この部分を変更できればよいわけです。
** 自分で定義したlightwindowInitに差し替える [#db4676fd]
まずは、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です。
** サンプル [#jd86d9d9]
下記リンクから、上記のデモが見られます。
- http://okra.ark-web.jp/~takemura/public/js/lightwindow/
#blikifooter(竹村)
tag: [[JavaScript>tag/JavaScript]], [[lightwindow>tag/lightwindow]]