litebox-1.0と同時に使いたいです。

質問

教えての検索で見つけました、nyanko_2003様の
下記の、文字をタイプライターのように打つスクリプトなのですが
今のブログには、litebox-1.0をbodyでonload？しているせいか
そのままでは上手く動いてくれませんでした、
難しいことは解らないのですが、
実験でliteboxのスクリプトを外すとちゃんとタイプ表示出来ましたので
何か対処法があればご教授お願い致します。

<SCRIPT LANGUAGE="JavaScript">
<!---
var st = new Array();

// メッセージ設定 \nが改行です。
st[0] ="ここにメッセージ\n"+
"ここにメッセージここにメッセージ"; // 複数の場合は、st[?]の数字に0から始まる連番を。

// 文字出現のスタイルシート。
var typeStyle = "font-size:10pt; line-height:15px; color:#000000; font-weight:nomal;"; // 左から文字サイズ、行間、色、字の種類
var typeSpeed = 100; // 次の文字を表示するまでの待ち時間。1000=１秒
var tugi = "_"; // 次の文字の所に出力するキャラクター★とかにすると面白いです。
var loop = true; // ループ設定。する：true　しない：false
var msgWait = 1000; // 次のメッセージを表示するまでの待ち時間。1000=１秒

_dom=(document.all?3:(document.getElementById?1:(document.layers?2:0)));

function writeTypeMsg(mes) {
if (_dom == 1) {
var div = document.getElementById("type");
while(div.hasChildNodes()) div.removeChild(div.lastChild);
var range=document.createRange();
range.selectNodeContents(div);
range.collapse(true);
var cf=range.createContextualFragment(mes);
div.appendChild(cf);
}

if (_dom == 2) {
var div = document.layers["typeN4"].layers["type"];
div.document.open();
div.document.write(mes);
div.document.close();
}

if (_dom == 3) document.all("type").innerHTML = mes;
}

charsuu=0;

if (("A".length) == 1) charsuu = 1;
else charsuu = 2;
cct = 0;
msgNo = 0;
mct = st[0].length;

function typing(){
cct += charsuu;
if (cct > mct) cct = mct;
Typeout = '<SPAN style="' + typeStyle + '">'
+ st[msgNo].substring(0,cct).replace(/\n/g, '<BR>')
+ (cct < mct ? tugi : '')
+ '</SPAN>';
writeTypeMsg(Typeout);
if (cct < mct) setTimeout('typing()', typeSpeed);
else {
msgNo = (msgNo >= st.length-1) ? 0 : msgNo + 1;
mct = st[msgNo].length; cct = 0;
if (!(!loop && msgNo == 0)) setTimeout('typing()', msgWait);
}
}

window.onload = typing;

// --->
</SCRIPT>

回答No.1

ai10 · ベストアンサー

複数のスクリプトを同時使用するのは避けるべきです。

というよりか、lightbox (いまはver.2.03.3) もそうだが
平気でグローバル変数を使っている。
( var borderSize とか他のスクリプトとかぶってしまいそうな名前が普通に使われている。他のスクリプトで var borderSize が使われた瞬間にうまく動作しない可能性がでてくる。両方とも )

それに、既存の String, Array にプロパティをどんどん追加している時点で迷惑な話だ。

…まぁ同時に使用したいならまずはイベント関係を書き直すことだ。

なぜなら、window.onload = function () {...} とすると、
以前のwindow.onloadを上書きしてしまうため。
だから、lightboxが動かなくなったんだろうと思われる。

上書きしないようなプログラムが必要。

なので、まずは、イベントを追加する関数を別途作成する。
function __emiemi83_crossAddEvent( element, event, handler )
{
　　if( element.attachEvent )
　　　　element.attachEvent( 'on'+event, handler );
　　else if( element.addEventListener )
　　　　element.addEventListener( event, handler, false );
　　else
　　{
　　　　var f = element['on'+event];
　　　　element['on'+event] = function ( evt )
　　　　{
　　　　　　f( evt ); handler( evt );
　　　　}
　　}
}

一応、古いブラウザを考慮してのものだが
うまく動作するかどうかはわからないｗ
というか、最新のブラウザにするようページのどこかに書いておいて
最新のブラウザにしてもらうとかすればいいんじゃないかな…。
(それか他の理由があってattachEvent, addEventListenerが使えないとかいうなら別だが)
あと、関数の名前にあなたの名前をつけさせてもらったので
もしイヤだったらごめんなさい。
(あまり他のスクリプトと名前がかぶらないようにしたかった。)

んで、イベント関係の処理はすべてこの関数を使う。
たとえば window.onload = function (){...} は次のようにする
__emiemi83_crossAddEvent( window, 'load', function (){...} );

という具合。
古いブラウザを考慮しないなら
//@cc_on
window./*@if (@_jscript) attachEvent( 'on'+ @else@*/ addEventListener( /*@end@*/ 'load', function (){...}, false );
で十分なはずだ。

もっと言うと、グローバルはなくしたい。
が、lightbox.js は他のjsファイルのグローバルな変数(関数)を参照している可能性がある。
だから、lightbox, prototype, effects, scriptaclous のスクリプト全体を見直す必要があるかもしれない。多分無理だｗ

タイプライターのスクリプトを見直す方がいいだろう。
st
typeStyle
typeSpeed
tugi
loop
msgWait
_dom
writeTypeMsg
charsuu
cct
msgNo
mct
typing
これだけのグローバルな変数(関数)が使われている。
( 中には var 宣言がないものもある。)
まぁ簡単にグローバルをはずしたいなら
冒頭に
( function () {
そして最後に
} )();
と書いときゃ大丈夫だろｗ
(…あ、それだと古いブラウザだと動かないのか…?よく知らんｗ)

お礼

新しいスクリプトまで書いて頂いてありがとうございます。
名前がほとんど本名なので恥ずかしいですが・・・
lightboxも実は重いので無い方がいいのかと少し考えていましたが
これでためしてみます。
本当にありがとうございました。

回答No.2

arexis

ま、とりあえず動けばいいと言う事として

そのスクリプトの
window.onload = typing;

を

window.onload = function(){
initLightbox();
typing();
}

で大丈夫かな？・・・多分。

同じページにあれこれJavaScriptをつける時は、共存が想定がされてコーディングされてる物じゃないとかなり辛くなりますよ^^;

お礼

そうですよね、実はlightboxを付けた時も、
ブログのサイドバーに色々入れていたブログパーツのいくつかを
泣く泣く排除いたしました＞＜

教えていただいてありがとうございます。
助かりました。