FC2ブログ

CHAI★POPPER

It moved on September 1, 2009.
2019 07123456789101112131415161718192021222324252627282930312019 09

javascript「FancyZoom」の設置・不具合等

2009/09/05 12:14
特定のブログパーツを使用した場合
「FancyZoom」が使えなくなる不具合の記事です~。
※例によって検索をかけても(自分にとって)わかりやすい情報が
 なかった為、PC初心者様への参考になればと思い記事に致します。


ついでに「FancyZoom」の設置方法について
わかりやすいページを紹介させて頂きますね♪



まず「FancyZoom」とはなんぞや?という方へ

C3E6C2BCCDA7.gif
このようなサムネイル画像をクリックした時
別窓が開かずにその場でポップアップするスクリプトです。
閉じたい場合は出てきた画像を再びクリックb
※もし、そんな動作をしない場合はお手数ですが
 教えて頂けると助かります(。-人-。)


設置方法はとっても簡単♪
・・・と言っても、他のブロガーさんの説明のおかげですが・・・。
設置方法はこちらをご参考下さい⇒ FancyZoom 導入方法


さて、今回アタシが紹介させて頂くのは・・・

特定のブログパーツを使用した場合
「FancyZoom」が使えなくなる不具合の解消についてです♪


こちらも他のブロガーさんが説明をして下さっているのですが
言いたいことはわかるし、きっとこうなんだろうな・・・
とは思っても全く自信がもてなかったので
友達に相談して掻い摘んで教えて貰いました(結局人任せ(*ノ∀`)ペチ)

元の情報はこちらをご参考下さい
Javascript onloadが複数ある場合の対処法

ある程度詳しい方は↑のサイトでわかると思いますが
ここに書いてある情報を初心者でもわかるよう
簡潔にまとめてご紹介致します..._〆(゚▽゚*)

あっ!その前に!!

[壁]ω・*)つ【免責事項】
今回紹介する方法にて発生した不具合等について
管理人は一切責任を取りません!!
カスタマイズがワケわからんくなったとかそゆのんは
全て自己責任でお願いします(。-人-。)
もしブログのテンプレートなら複製を作ってから
対応するのをオススメします☆⌒c(*゚ー゚*)





【不具合発生理由】
※修正方法だけ知りたい方はスルーでOK

FancyZoomの設置時に
<body id="whatever" onload="setupZoom()">
のタグを使用するのですが
もしブログパーツのJavaScriptにwindow.onload = が使用されている場合
後ろの書かれたonloadが優先され、前に書かれたonloadが無効になるそうなんですねー。

ちなみにあたしの場合だと月齢ブログパーツがwindow.onload =
使用したスクリプトなのでFancyZoomが使えなくなったのです(´・ω・`)
なおブログパーツのURLに表記されるのではなく外部スクリプトのソースにあるので
ブログパーツのURLを見ただけではwindow.onload = があるかどうか判別できません。



【外部スクリプトのソースを見る方法】
※修正方法だけ知りたい方はスルーでOK

例)月齢ブログパーツのタグ
<script src="http://tool2.fxwill.com/moonphase/moonage.js"></script>
<a href="http://fxwill.com/" id="fxwillmoonage">fxwill.com</a>

この場合、この部分
http://tool2.fxwill.com/moonphase/moonage.js
をブラウザのURL欄に入力してエンターをすればソースが表示されます。
(ごめんなさい!これFireFoxの方法でした。
 IEはエンター後、PCに保存できます><)
あとはテキストの検索でwindow.onload =を探せばオッケー☆⌒c(*゚ー゚*)



こっから本題
【修正方法】
もちろんブログパーツによって使えなくなった
FancyZoomを使えるようにする方法ですよ!w


(1)addonload.jsを作る。

なんでもいいのでテキストエディタに下記を貼り付け
addonload.jsという名前をつけて保存します。
注)拡張子は必ず「.js」で!メモ帳でも作れたよ( 'ω' )

function addOnloadEvent(fnc) {
if (typeof window.addEventListener != "undefined")
window.addEventListener( "load", fnc, false);
else if ( typeof window.attachEvent != "undefined" ){
window.attachEvent( "onload", fnc );
}
else {
if ( window.onload != null) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
window[fnc]();
};
}
else
window.onload = fnc;
}
}



(2)addonload.jsをアップロードする。

まさかアップロードする場所がわからない
ということはないと思いますが・・・。
念のために書いておくとFancyZoom.jsファイルを
アップしたところと同じ場所ですよ~。

fc2ブログなら「ファイルアップロード」でオッケー☆⌒c(*゚ー゚*)


(3)htmlを書き換えましょう♪
注)あたしがFancyZoomをfc2ブログでしか使用していない為
  他のブログやサイトの仕組みに関しては一切わかりません。
  そう大差ないとは思うので自己責任で対応して下さいね(。-人-。)


修正前のタグはこうなってると思います。

FancyZoomのスクリプトのタグ
<script type="text/javascript" src="FancyZoom.jsファイルのアドレス"></script>
<script type="text/javascript" src="FancyZoomHTML.jsファイルのアドレス"></script>

↓これは元々bodyだけだった部分です。覚えてますか~?
<body id="whatever" onload="setupZoom()">


それでは修正してみましょー♪

FancyZoomのスクリプトのタグが増えましたヾ(o゚ω゚o)ノ゙
<script type="text/javascript" src="addonload.jsファイルのアドレス"></script>
<script type="text/javascript" src="FancyZoom.jsファイルのアドレス"></script>
<script type="text/javascript" src="FancyZoomHTML.jsファイルのアドレス"></script>
<script type="text/javascript"> addOnloadEvent(function() {setupZoom();}); </script>

そして
<body id="whatever" onload="setupZoom()">
<body>
に戻します。




これで無事FancyZoomが使えるようになっているはず!!
しつこいようですが責任は一切取りません(というより取れません・・・)
ので自己責任で頑張って下さいヾ(o゚ω゚o)ノ゙ ヾ(o゚ω゚o)ノ゙

でも・・・この記事どーりやっても上手くいかないよー><
っていう質問や報告はいくらでも受け付けますので
(答えれるかどうかは別として・・・w)
気軽にコメント下さいまし(。-人-。)


もしこの記事が参考になったのであれば拍手をお願いします♪
今後こういった情報記事をUPするかどうかの目安にしますのでb
【現在お礼画像7点♪】
拍手する

【CHAI★POPPERはブログランキングに参加しています】
ブログランキング・にほんブログ村へ
【1日1回ポチっと押して頂けるとちゃいなの更新が活発になります♪】
コメントの投稿












管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL

Twitter
フォロー大歓迎です♪
ボタンをポチっとお願いします(。-人-。)
Follow chaipopper on Twitter
フォローを頂いた際
一言頂けると有難いです。
Twitter
ブロとも申請フォーム
ブロとも大歓迎です。初対面の方でも構いませんが今後交流のある方に限らせて頂きます。

この人とブロともになる