前記事で紹介した”FancyZoom”を、運営中の他のブログにも設置してみたところ、サムネイル画像をクリックしても別画面で元画像を表示するだけで、うまくズームアップ表示してくれません。
何か他のJavaScriptとバッティングしていないかと調べてみると、以前から設置していた日産キューブのブログシール（以下ブログシール）との相性が悪いようです。ブログシールを外すとFancyZoomはちゃんと動作します。でもお気に入りのブログシールを外すのは忍び難い。何とかならないものか・・・
※対策後は両方ちゃんと動きます。（確認のためこちらにもブログシールを設置）
ブログシールで読み込まれる外部スクリプトを開いてみると、バッティングの原因が見つかりました。
163行目からの記述に、window.onload = function(){ document.body.appendChild(cubeLayer); setLayer(); というのがあります。
一方、FancyZoomの起動には HTMLの<body>タグにonload="setupZoom()"を追加するようになっています。
window.onload と body.onload との違い（動作を含めて）は初心者の私にはよくわかりませんが、いずれにせよページが読み込まれたら何か処理を行うという意味で使われるこれらのコードは、後に書かれたものだけが実行されるため、私の場合、FancyZoomの後に記述されているブログシールの処理だけが実行されて、FancyZoomは動かないのです。 やれやれ・・・
では、これら２つのスクリプトを共存できるようにするにはどうしたらよいか。
<body onload= で複数の関数を実行させる場合は。<body onload="1番目の処理"; "2番目の処理"> と；（セミコロン）でつなげば良いようです。（参考記事） しかし、今回は一方がwindow.onload、もう一方は<body onload= と使い方も異なります。さらに、ブログシールは利用規約上勝手に記述を改変することは許されていません。
したがって、FancyZoomの方を工夫してみる必要があります。
FancyZoomのj実行方法である <body onload="setupZoom()"> というHTMLの記述は、Javascriptでは window.onload = function(){
setupZoom();} と変更できます。
これで双方のスクリプトが window.onload に統一できました。
問題はwindow.onload で複数の処理を行わせるのはどのように記述したらよいかということになります。
困ったときの神頼み、Google頼みで検索してみるとありました！
こちらは海外のサイトですが、まさにこの問題の解決法が書かれています。
＜コード＞
＜サンプル＞
さっそく、この通りに記述した外部スクリプトファイルを置いてみたら、見事FancyZoomとブログシールの両方がちゃんと動作しました♪
FancyZoom動作確認用画像
＜結論＞
FancyZoomの設定に関してHTMLは次のようになりました（該当部分抜粋） もちろんこれはFancyZoomに限らず、window.onload や body onload= で呼び出されるスクリプトを共存する場合に応用できます。 解決用のスクリプトはJavascriptの冒頭に設置することで、それ以降 window.onload を使用したスクリプトを読み込んだ場合でもバッティングが生じないようにしておきます。 変更後の内容で「addonload.js」という名前のｊｓファイルがそうです。内容はこちらのサイトの記述の通りです。
変更前： src= の部分はご自身のサイトやブログに合わせて変更してください
変更後： src= の部分はご自身のサイトやブログに合わせて変更してください
ずっと悩んでいた「ページロード時に行う処理を異なる場所で指定する」が、おかげさまで解決できました。
さっそく自分のサイトにも組み込んでみます。ありがとうございました。
コメントありがとうございます
更新を終了してしばらく経ちますがお役に立てたようで何よりです。こちらも嬉しく思っています。
更新終了されているのにすみません。
seesaaブログに設置しようと思っているのですが、
カスタマイズ初心者で、スクリプトの事も初心者です。
外部スクリプトの事で分からない事があるので質問させて頂きます。
外部スクリプトを作成する際に、上の＜コード＞を記述して、
addonload.js というファイルを作ればいいのですか？
＜サンプル＞はどう使えばいいのでしょうか。
また、作ったaddonload.jsファイルは、seesaaの
ファイルマネージャにアップロードすればいいのですか？
初歩的な質問ですみません。
お時間ある時によろしくお願いします。m(_ _)m